FullCalander is a jquery plugin to implement calendar and events in calendar.
Basic usage: Add a div with id ‘calendar’ in your html then,
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: new Date(),
slotDuration: '00:30:00',
editable: true,
selectable: true,
selectHelper: true,
height: 'auto',
events: [
{
title: 'All Day Event',
start: '2015-02-01'
},
{
title: 'Lunch',
start: '2015-02-12T12:00:00'
},
{
title: 'Meeting',
start: '2015-02-12T14:30:00'
},
{
title: 'Dinner',
start: '2015-02-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2015-02-13T07:00:00'
}
]
})If you want different colors for events then eventRender call back will be helpful. Assign a variable color to event object and then use that to change color of event.
Example:
event = {
title: 'Dinner',
start: '2015-02-12T20:00:00',
end: '2015-02-12T21:00:00',
color: '#ff00ac'
}Now use this attribute to change color of event.
eventRender: function (event, element, view) {
if (event.color) {
element.css('background-color', event.color)
}
}