Tuesday, May 3, 2016

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.
}




No comments:

Post a Comment

How ChatGPT can Benefit Coding: Your Guide to Leveraging an AI Language Model

 Introduction: Hello, coders! Welcome to this blog post on how ChatGPT, an AI language model, can benefit your coding skills and projects. A...