<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:schedule="http://richfaces.org/sandbox/schedule">
<ui:composition template="/pages/template.xhtml">
<ui:define name="body">
<style type="text/css">
.rich-schedule {
width: 600px;
margin-left: 20px;
}
.customFC {
border: 1px solid red;
}
.fc-header span {
font-size: 12px;
}
</style>
<script type="text/javascript">
function notify(action, text, timeToStay) {
RichFaces.Notify({title:action,text:text,sticky:false,styleClass:'rf-ny-info',stayTime:timeToStay});
}
function blockEvent(item, event, action) {
RichFaces.Notify({title:action,text:item.title,sticky:false,styleClass:'rf-ny-error'});
}
function viewChanged(view) {
notify('View changed', view.name);
}
function daySelected(date, allDay, event, view) {
notify('Day select', toString(date) + ' ' + (allDay ? 'with all day slot' : ''));
}
function daySelectedComplete(date, allDay, event, view, data) {
notify('Day select complete', toString(date) + ' ' + (allDay ? 'with all day slot' : '') + ";data=" + toString(data));
}
function itemSelected(item, event, view) {
notify("Item selected", "item:" + item.title + ";event=" + event.type + ";view:" + view.name);
}
function itemSelectedComplete(item, event, view, data) {
notify("Item selected complete", "item:" + item.title + ";event=" + event.type + ";view:" + view.name + ";data=" + toString(data));
}
function itemResized(item, dayDelta, minuteDelta, event, ui, view) {
notify("Item resized", "item:" + item.title + ";dayDelta=" + dayDelta + ";minuteDelta=" + minuteDelta + ";event=" + event.type + ";ui=" + ui + ";view:" + view.name);
}
function itemResizedComplete(item, dayDelta, minuteDelta, vetoed, event, ui, view, data) {
notify("Item resized complete", "item:" + item.title + ";dayDelta=" + dayDelta + ";minuteDelta=" + minuteDelta + ";vetoed=" + vetoed + ";event=" + event.type + ";ui=" + ui + ";view:" + view.name + ";data=" + toString(data));
}
function itemDrop(item, dayDelta, minuteDelta, allDay, event, ui, view) {
notify("Item drop", "item:" + item.title + ";dayDelta=" + dayDelta + ";minuteDelta=" + minuteDelta + ";allDay=" + allDay + ";event=" + event.type + ";ui=" + ui + ";view:" + view.name);
}
function itemDropComplete(item, dayDelta, minuteDelta, allDay, vetoed, event, ui, view, data) {
notify("Item drop complete", "item:" + item.title + ";dayDelta=" + dayDelta + ";minuteDelta=" + minuteDelta + ";allDay=" + allDay + ";vetoed=" + vetoed + ";event=" + event.type + ";ui=" + ui + ";view:" + view.name + ";data=" + toString(data));
}
function dragStart(item, event, ui, view) {
notify("Item drag start", "item:" + item.title + ";event=" + event.type + ";ui=" + ui + ";view:" + view.name);
}
function dragStop(item, event, ui, view) {
notify("Item drag stop", "item:" + item.title + ";event=" + event.type + ";ui=" + ui + ";view:" + view.name);
}
function itemResizeStart(item, event, ui, view) {
notify("Item resize start", "item:" + item.title + ";event=" + event.type + ";ui=" + ui + ";view:" + view.name);
}
function itemResizeStop(item, event, ui, view) {
notify("Item resize stop", "item:" + item.title + ";event=" + event.type + ";ui=" + ui + ";view:" + view.name);
}
function itemMouseover(item) {
notify('Mouseover', item.title, 1000);
}
function itemMouseout(item) {
notify('Mouseout', item.title, 1000);
}
function dateRangeSelected(startDate, endDate, allDay, view) {
notify('Date range selected', toString(startDate) + " - " + toString(endDate) + "; " + (allDay ? "all day" : "not all day") + ";view:" + view.name);
}
function dateRangeSelectedComplete(startDate, endDate, allDay, view, data) {
notify('Date range selected complete', toString(startDate) + " - " + toString(endDate) + "; " + (allDay ? "all day" : "not all day") + ";view:" + view.name + ";data=" + toString(data));
}
function dateRangeChanged(startDate, endDate) {
notify('Date range changed', toString(startDate) + " - " + toString(endDate));
}
function toString(object) {
if (object instanceof Date) {
return object.getFullYear() + "/" + object.getMonth() + "/" + object.getDate() + " " + object.getHours() + ":" + object.getMinutes();
}
if (typeof object == "string") {
return object;
}
var str = "[";
for (i in object) {
str += i + "=" + object[i] + ";"
}
return str + "]";
}
</script>
<p>
First schedule's JavaScript callbacks do not veto
any event and just notify user (veto may be raised by server side listener).
</p>
<p>
Second schedule's JavaScript callbacks <b>veto</b>
all events.
</p>
<h:form>
<schedule:schedule switchType="ajax"
value="#{myBean.lazyDataModel}" var="event"
date="#{myBean.initialDate}"
editable="true"
selectable="true"
headerCenter="title"
headerLeft="prevYear,nextYear"
headerRight="basicDay,basicWeek agendaDay,agendaWeek month today prev,next"
itemResizeListener="#{myBean.taskResized}"
itemMoveListener="#{myBean.taskMoved}"
data="#{myBean.allDayText}"
eventsQueue="schedule1"
onbeforeitemselect="itemSelected(item,event,view)"
onitemselect="itemSelectedComplete(item,event,view,data)"
onbeforeitemresize="itemResized(item,dayDelta,minuteDelta,event,ui,view)"
onitemresize="itemResizedComplete(item,dayDelta,minuteDelta,vetoed,event,ui,view,data)"
onbeforeitemdrop="itemDrop(item,dayDelta,minuteDelta,allDay,event,ui,view)"
onitemdrop="itemDropComplete(item,dayDelta,minuteDelta,allDay,vetoed,event,ui,view,data)"
onitemdragstart="dragStart(item,event,ui,view)"
onitemdragstop="dragStop(item,event,ui,view)"
onitemresizestart="itemResizeStart(item,event,ui,view)"
onitemresizestop="itemResizeStop(item,event,ui,view)"
onviewchange="viewChanged(view)"
onbeforedateselect="daySelected(date,allDay,event,view)"
ondateselect="daySelectedComplete(date,allDay,event,view,data)"
ondaterangeselect="dateRangeSelected(startDate,endDate,allDay,view)"
ondaterangechange="dateRangeChanged(startDate,endDate)"
onitemmouseover="itemMouseover(item)"
onitemmouseout="itemMouseout(item)"
styleClass="customFC"
>
<schedule:scheduleItem eventId="#{event.id}" startDate="#{event.startDate}" title="#{event.title}"
endDate="#{event.endDate}" allDay="#{event.allDay}"
styleClass="#{event.id == 1 ? 'first' : null}" data="#{event.data}"/>
</schedule:schedule>
<schedule:schedule switchType="ajax"
value="#{myBean.lazyDataModel}" var="event"
date="#{myBean.initialDate}"
editable="true"
selectable="true"
headerCenter="title"
headerLeft="prevYear,nextYear"
headerRight="basicDay,basicWeek agendaDay,agendaWeek month today prev,next"
eventsQueue="schedule2"
onbeforeitemselect="blockEvent(item,event,'select'); return false;"
onitemselect="itemSelectedComplete(item,event,view,data)"
onbeforeitemresize="blockEvent(item,event,'resized'); return false;"
onitemresize="itemResizedComplete(item,dayDelta,minuteDelta,vetoed,event,ui,view,data)"
onbeforeitemdrop="blockEvent(item,event,'drop'); return false;"
onitemdrop="itemDropComplete(item,dayDelta,minuteDelta,allDay,vetoed,event,ui,view,data)"
onitemdragstart="blockEvent(item,event,'dragStart'); return false;"
onitemdragstop="blockEvent(item,event,'dragStop'); return false;"
onitemresizestart="blockEvent(item,event,'resizeStart'); return false;"
onitemresizestop="blockEvent(item,event,'resizeStop'); return false;"
onviewchange="viewChanged(view); return false;"
onbeforedateselect="daySelected(date,allDay);return false;"
ondateselect="daySelectedComplete(date,allDay,event,view,data)"
onbeforedaterangeselect="blockEvent(startDate,endDate,'dateRangeSelected'); return false;"
ondaterangeselect="dateRangeSelected(startDate,endDate,allDay,view,data)"
ondaterangechange="dateRangeChanged(startDate,endDate);return false;"
>
<schedule:scheduleItem eventId="#{event.id}" startDate="#{event.startDate}" title="#{event.title}"
endDate="#{event.endDate}" allDay="#{event.allDay}"
styleClass="#{event.id == 1 ? 'first' : null}" data="#{event.data}"/>
</schedule:schedule>
</h:form>
<rich:insert src="/pages/sample_4.xhtml" highlight="xhtml"/>
</ui:define>
</ui:composition>
</html>