Full calendar
1. Download http://fullcalendar.io/download/
2. Document http://fullcalendar.io/docs/
3. Javascript code.
function initCalendar(data, date) {
var decodedString = $.parseJSON(Base64.decode(data));
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar('render');
// $('#calendar').fullCalendar('rerenderEvents');
// var obj = $.parseJSON(document.getElementById('json').getAttribute("value"));
$('#calendar').fullCalendar({
header : {
left : 'prev,next today',
center : 'title',
right : 'month,agendaWeek,agendaDay'
},
defaultView : 'agendaWeek',
minTime : "07:00:00",
maxTime : "19:00:00",
defaultDate : date,
selectable : true,
selectHelper : true,
select : function(start, end) {
var title = "New Appointment";
var eventData;
eventData = {
title : title,
start : start,
end : end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
zAu.send(new zk.Event(zk.Widget.$('$json'), "onCreateCalendar", eventData, {
toServer : true
}));
$('#calendar').fullCalendar('unselect');
},
eventDrop : function(event, delta, revertFunc) {
// alert(event.title + " was dropped on " + event.start.format());
//
// if (!confirm("Are you sure about this change?")) {
// revertFunc();
// }
eventData = {
id : event.id,
title : event.title,
start : event.start,
end : event.end
};
zAu.send(new zk.Event(zk.Widget.$('$json'), "onUpdateCalendar", eventData, {
toServer : true
}));
},
eventResize : function(event, delta, revertFunc) {
// alert(event.title + " end is now " + event.end.format());
//
// if (!confirm("is this okay?")) {
// revertFunc();
// }
eventData = {
id : event.id,
title : event.title,
start : event.start,
end : event.end
};
zAu.send(new zk.Event(zk.Widget.$('$json'), "onUpdateCalendar", eventData, {
toServer : true
}));
},
eventClick : function(calEvent, jsEvent, view) {
eventData = {
id : calEvent.id,
title : calEvent.title,
start : calEvent.start,
end : calEvent.end
};
zAu.send(new zk.Event(zk.Widget.$('$json'), "onUpdateCalendar", eventData, {
toServer : true
}));
},
editable : true,
eventLimit : true, // allow "more" link when too many events
events : decodedString
});
}
4. Code.
<div class="col-md-9">
<h:include id="json" type="hidden"></h:include>
<n:div id="calendar"></n:div>
</div>
5. ViewModel Code.
Just call it inside init method with JSON String.
SimpleDateFormat format = new SimpleDateFormat("MM/dd/yyyy");
Clients.evalJavaScript("initCalendar(\"'" + Base64.encode(json) + "'\",\"'" + format.format(new Date()) + "'\");");
update event.
@Listen("onUpdateCalendar=#json")
public void onUpdateCalendar(org.zkoss.zk.ui.event.Event event) {
//code here.
}
create event.
@Listen("onCreateCalendar=#json")
public void onCreateCalendar(org.zkoss.zk.ui.event.Event event) {
//code here.
}
