By using fullcalender tool we can add calender in our web page
Example code for this calender is
[sourcecode language="html"]
<section class="content">
<div class="row">
<div class="col-md-3">
<div class="box box-solid">
<div class="box-header with-border">
<h4 class="box-title">Draggable Events</h4>
</div>
<div class="box-body">
<!-- the events -->
<div id="external-events">
<div class="external-event bg-green">Lunch</div>
<div class="external-event bg-yellow">Go home</div>
<div class="external-event bg-aqua">Do homework</div>
<div class="external-event bg-light-blue">Work on UI design</div>
<div class="external-event bg-red">Sleep tight</div>
<div class="checkbox">
<label for="drop-remove">
<input type="checkbox" id="drop-remove">
remove after drop
</label></div>
</div>
</div>
<!-- /.box-body --></div>
<!-- /. box -->
<div class="box box-solid">
<div class="box-header with-border">
<h3 class="box-title">Create Event</h3>
</div>
<div class="box-body">
<div class="btn-group" style="width: 100%; margin-bottom: 10px;">
<!--<button type="button" id="color-chooser-btn" class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">Color <span class="caret"></span></button>-->
<ul class="fc-color-picker" id="color-chooser">
<li><a class="text-aqua" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-blue" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-light-blue" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-teal" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-yellow" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-orange" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-green" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-lime" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-red" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-purple" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-fuchsia" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-muted" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-navy" href="#"><i class="fa fa-square"></i></a></li>
</ul>
</div>
<!-- /btn-group -->
<div class="input-group">
<input id="new-event" type="text" class="form-control" placeholder="Event Title">
<div class="input-group-btn">
<button id="add-new-event" type="button" class="btn btn-primary btn-flat">Add</button></div>
<!-- /btn-group --></div>
<!-- /input-group --></div>
</div>
</div>
<!-- /.col -->
<div class="col-md-9">
<div class="box box-primary">
<div class="box-body no-padding">
<!-- THE CALENDAR -->
<div id="calendar"></div>
</div>
<!-- /.box-body --></div>
<!-- /. box --></div>
<!-- /.col --></div>
<!-- /.row -->
</section></div>
<script>
$(function () {
/* initialize the external events
-----------------------------------------------------------------*/
function ini_events(ele) {
ele.each(function () {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 1070,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
}
ini_events($('#external-events div.external-event'));
/* initialize the calendar
-----------------------------------------------------------------*/
//Date for the calendar events (dummy data)
var date = new Date();
var d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listDay,listWeek,listMonth'
},
buttonText: {
today: 'today',
month: 'month',
week: 'week',
day: 'day',
listDay: 'list day',
listWeek: 'list week',
listMonth:'list Month'
},
//Random default events
events: [
{
title: 'All Day Event',
id:'1',
start: new Date(y, m, 1),
backgroundColor: "#f56954", //red
borderColor: "#f56954" //red
},
{
title: 'Long Event',
id:'2',
start: new Date(y, m, d - 5),
end: new Date(y, m, d - 2),
backgroundColor: "#f39c12", //yellow
borderColor: "#f39c12" //yellow
},
{
title: 'Meeting',
id:'3',
start: new Date(y, m, d, 10, 30),
allDay: false,
backgroundColor: "#0073b7", //Blue
borderColor: "#0073b7" //Blue
},
{
title: 'Lunch',
id:'4',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false,
backgroundColor: "#00c0ef", //Info (aqua)
borderColor: "#00c0ef" //Info (aqua)
},
{
title: 'Birthday Party',
id:'5',
start: new Date(y, m, d + 1, 19, 0),
end: new Date(y, m, d + 1, 22, 30),
allDay: false,
backgroundColor: "#00a65a", //Success (green)
borderColor: "#00a65a" //Success (green)
},
{
title: 'Click for Google',
id:'6',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/',
backgroundColor: "#3c8dbc", //Primary (light-blue)
borderColor: "#3c8dbc" //Primary (light-blue)
}
],
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function (date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
copiedEventObject.backgroundColor = $(this).css("background-color");
copiedEventObject.borderColor = $(this).css("border-color");
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
alert(date);
},
eventDrop: function(event, delta, revertFunc) {
alert(event.title + " was dropped on " + event.start.format());
if (!confirm("Are you sure about this change?")) {
revertFunc();
}
},
eventResize: function(event, delta, revertFunc) {
alert(event.title + " end is now " + event.end.format());
if (!confirm("is this okay?")) {
revertFunc();
}
},
dayClick: function(date, jsEvent, view) {
alert('Clicked on: ' + date.format());
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('Current view: ' + view.name);
// change the day's background color just for fun
$(this).css('background-color', 'red');
},
eventClick: function(calEvent, jsEvent, view) {
alert('Event: ' + calEvent.title +'['+calEvent.id+']');
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('View: ' + view.name);
// change the border color just for fun
$(this).css('border-color', 'red');
}
});
/* ADDING EVENTS */
var currColor = "#3c8dbc"; //Red by default
//Color chooser button
var colorChooser = $("#color-chooser-btn");
$("#color-chooser > li > a").click(function (e) {
e.preventDefault();
//Save color
currColor = $(this).css("color");
//Add color effect to button
$('#add-new-event').css({"background-color": currColor, "border-color": currColor});
});
$("#add-new-event").click(function (e) {
e.preventDefault();
//Get value and make sure it is not null
var val = $("#new-event").val();
if (val.length == 0) {
return;
}
//Create events
var event = $("
<div />");
event.css({"background-color": currColor, "border-color": currColor, "color": "#fff"}).addClass("external-event");
event.html(val);
$('#external-events').prepend(event);
//Add draggable funtionality
ini_events(event);
//Remove event from text input
$("#new-event").val("");
});
});
</script>
[/sourcecode]
for more detailed events click
here
Keep Visiting :-))
Comments
Post a Comment