jQuery Full calendar implemented in ZK

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.

}