[英]Changing starting hours in jquery Week Calender?
我正在使用jquery周日历安排一些约会,但一切都很好,但是我希望日历从6:00 am而不是12:00 am开始。 我已经检查了所有jquery的公共功能以进行日历自定义,但是找不到改变它的方法。 我也检查了jquery.weekcalendar.js文件,但找不到实现此功能的方法(或不知道该怎么做)。 有什么方法可以实现这一目标吗? 任何帮助将不胜感激。 谢谢。
您需要businessHours选项, 开始指定显示的开始时间, 结束指定显示的结束时间。
$('#calendar').weekCalendar({
data: eventData,
firstDayOfWeek: dayOfWeek,
timeslotsPerHour: 4,
allowCalEventOverlap: true,
overlapEventsSeparate: true,
totalEventsWidthPercentInOneColumn: 95,
buttons: false,
title: '',
// ***HERE IS THE OPTION YOU NEED TO USE***
businessHours: { start: 10, end: 22, limitDisplay: true },
height: function ($calendar) {
return $(window).height() - $('h1').outerHeight(true);
},
eventRender: function (calEvent, $event) {
if (calEvent.title == "Booked Slot") {
var classe = $event.attr('class');
$event.attr('class', classe + ' colr');
}
},
resizable: function (calEvent, $event) {
if (calEvent.title == "Booked Slot") {
return false;
}
return true;
},
draggable: function (calEvent, $event) {
if (calEvent.title == "Booked Slot") {
return false;
}
return true;
},
eventNew: function (calEvent, $event) {
debugger;
displayMessage('<strong>Added event</strong><br/>Start: ' + calEvent.start + '<br/>End: ' + calEvent.end);
//alert('You\'ve added a new event. You would capture this event, add the logic for creating a new event with your own fields, data and whatever backend persistence you require.');
var $dialogContent = $("#event_edit_container");
resetForm($dialogContent);
var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
var titleField = $dialogContent.find("input[name='title']");
var bodyField = $dialogContent.find("textarea[name='body']");
$dialogContent.dialog({
modal: true,
title: "New Calendar Event",
close: function () {
$dialogContent.dialog("destroy");
$dialogContent.hide();
$('#calendar').weekCalendar("removeUnsavedEvents");
},
buttons: {
save: function () {
calEvent.id = id;
id++;
calEvent.start = new Date(startField.val());
calEvent.end = new Date(endField.val());
calEvent.title = titleField.val();
calEvent.body = bodyField.val();
$calendar.weekCalendar("removeUnsavedEvents");
$calendar.weekCalendar("updateEvent", calEvent);
$dialogContent.dialog("close");
},
cancel: function () {
$dialogContent.dialog("close");
}
}
}).show();
$dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start));
setupStartAndEndTimeFields(startField, endField, calEvent, $calendar.weekCalendar("getTimeslotTimes", calEvent.start));
},
eventDrop: function (calEvent, $event) {
displayMessage('<strong>Moved Event</strong><br/>Start: ' + calEvent.start + '<br/>End: ' + calEvent.end);
},
eventResize: function (calEvent, $event) {
displayMessage('<strong>Resized Event</strong><br/>Start: ' + calEvent.start + '<br/>End: ' + calEvent.end);
},
eventClick: function (calEvent, $event) {
debugger;
displayMessage('<strong>Clicked Event</strong><br/>Start: ' + calEvent.start + '<br/>End: ' + calEvent.end);
if (calEvent.readOnly) {
return;
}
var $dialogContent = $("#event_edit_container");
resetForm($dialogContent);
var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
var titleField = $dialogContent.find("input[name='title']").val(calEvent.title);
var bodyField = $dialogContent.find("textarea[name='body']");
bodyField.val(calEvent.body);
$dialogContent.dialog({
modal: true,
title: "Edit - " + calEvent.title,
close: function () {
$dialogContent.dialog("destroy");
$dialogContent.hide();
$('#calendar').weekCalendar("removeUnsavedEvents");
},
buttons: {
save: function () {
calEvent.start = new Date(startField.val());
calEvent.end = new Date(endField.val());
calEvent.title = titleField.val();
calEvent.body = bodyField.val();
$calendar.weekCalendar("updateEvent", calEvent);
$dialogContent.dialog("close");
},
"delete": function () {
$calendar.weekCalendar("removeEvent", calEvent.id);
$dialogContent.dialog("close");
},
cancel: function () {
$dialogContent.dialog("close");
}
}
}).show();
var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
$dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start));
setupStartAndEndTimeFields(startField, endField, calEvent, $calendar.weekCalendar("getTimeslotTimes", calEvent.start));
$(window).resize().resize(); //fixes a bug in modal overlay size ??
},
eventMouseover: function (calEvent, $event) {
displayMessage('<strong>Mouseover Event</strong><br/>Start: ' + calEvent.start + '<br/>End: ' + calEvent.end);
},
eventMouseout: function (calEvent, $event) {
displayMessage('<strong>Mouseout Event</strong><br/>Start: ' + calEvent.start + '<br/>End: ' + calEvent.end);
},
noEvents: function () {
displayMessage('There are no events for this week');
}
});
function displayMessage(message) {
//$('#message').html(message).fadeIn();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.