FullCalendar, can be set to an arbitrary value of false, but allow slot selection
I am making an app with FullCalendar .
I noticed that when selectable
set to true
, the user was able to select multiple weeks or time slots that were not desired. On the other hand, when I set selectable
to false
, then I can no longer use the select action that I want to fire when the user selects a time interval. Is there a way for the function to selectable
stay until false
, but still each time slot is selected on its own and not as part of a group of time slots.
Here's my code, passed as an array via PHP:
'options'=>array(
'header'=>array(
'left'=>'prev,next,today',
'center'=>'title',
'right'=> 'month,agendaWeek,agendaDay',
),
'minTime' => '09:00:00',
'maxTime' => '20:00:00',
'slotDuration' => '01:00:00',
'slotEventOverlap' => false,
'defaultTimedEventDuration' => '01:00:00',
'allDaySlot' => false,
'allDay' => false,
'lazyFetching'=>true,
'weekends' => false,
'selectable' => true,
'height' => 'auto',
'contentHeight' => '150',
// 'selectHelper' => true,
// 'events'=>array(), // pass array of events directly
'select' => new CJavaScriptExpression("function(start, end, jsEvent, view) {
var currdisplay = view.name;
var check = Date.parse(start) / 1000;
var today = Date.parse(new Date()) / 1000;
if (currdisplay != 'month' && check >= today) {
var start1 = Date.parse(start) / 1000;
var end = Date.parse(start) / 1000 + 3600;
window.location.href = \"www.somelink.com/?from=\" + start1 + \"&to=\" + end;
}}"),
'dayClick' => new CJavaScriptExpression("function(date, jsEvent, view) {
var currdisplay = view.name;
if (currdisplay == 'month') {
$('.calendar').fullCalendar('gotoDate', date);
$('.calendar').fullCalendar('changeView', 'agendaWeek');
}}"),
I have a fix that you can probably see in the code block:
var start1 = Date.parse(start) / 1000;
var end = Date.parse(start) / 1000 + 3600;
These two lines make sure that if the user selects 5 time slots to set the end time to 1 hour (3600 seconds) after the start, not 5 hours later, but I am not satisfied with this solution since I didn't find this clean and I don't like the feature selectable
is still available.
source to share
Imperfect solution for time slots:
Is this good for you?
http://jsfiddle.net/3E8nk/739/
select: (function() {
var humanSelection = true;
return function(start, end, jsEvent, view) {
if(humanSelection) {
humanSelection = false;
$('#calendar').fullCalendar('select', start);
humanSelection = true;
}
};
})(),
Solution for days:
Try using day to set the background color to whatever you want.
dayClick: (function() {
var lastThis;
return function(date, jsEvent, view) {
if(lastThis)
lastThis.css('background-color', 'white');
lastThis = $(this);
$(this).css('background-color', 'lightblue');
}
})(),
source to share