I'm implementing a fullcalendar in a project using which users can select future dates.
Is there a way to unselect the selected days?
I tried giving $("#calendar").fullCalendar("unselect"); but it didn't work.
FIDDLE
var today = $('#calendar').fullCalendar('getDate');
$('#calendar').fullCalendar({
defaultDate: today,
header: {
left: 'prev,next today',
center: 'title',
right: 'month'
},
defaultView: 'month',
events: [],
selectable: true,
select: function(start, end, jsEvent, view) {
if (moment().diff(start, 'days') > 0) {
$('#calendar').fullCalendar('unselect');
// or display some sort of alert
return false;
}
var date = $('#calendar').fullCalendar('getDate');
$("#calendar").fullCalendar('addEventSource', [{
start: start,
end: end,
rendering: 'background',
block: true,
}, ]);
$("#calendar").fullCalendar("unselect");
},
selectOverlap: function(event) {
return !event.block;
}
});
function eventSource(){
$("#calendar").fullCalendar('addEventSource', [{
start: start,
end: end,
rendering: 'background',
block: true,
}, ]);
}
var today = $('#calendar').fullCalendar('getDate');
$('#calendar').fullCalendar({
defaultDate: today,
header: {
left: 'prev,next today',
center: 'title',
right: 'month'
},
defaultView: 'month',
events: [],
selectable: true,
select: function(start, end, jsEvent, view) {
if (moment().diff(start, 'days') > 0) {
$('#calendar').fullCalendar('unselect');
// or display some sort of alert
return false;
}
eventSource();
var date = $('#calendar').fullCalendar('getDate');
},
selectOverlap: function(event) {
return !event.block;
}
});
Related
I need to work with extendedProps, but when i try to show info.event.extendedProps.description in timeGridWeek or timeGridDay it doesn't (it say "undefined"), only in dayGridMonth. I have read the docs, but i don't know how to show these non-standard properties.
The events are displayed correctly.
(Sorry for my poor english)
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'interaction', 'bootstrap', 'timeGrid', 'rrule' ],
height: 'parent',
header: {
left: 'prev,next today',
center: 'title',
right: 'timeGridDay,timeGridWeek,dayGridMonth'
},
titleFormat: {
year: 'numeric',
month: 'long',
day: '2-digit'
},
defaultView: 'timeGridWeek',
themeSystem: 'bootstrap',
selectable: true,
editable: true,
navLinks: true,
weekNumbers: true,
nowIndicator: true,
locale: 'es',
minTime: '08:00:00',
maxTime: '22:00:00',
weekends: false,
eventOrder : 'color',
eventSources: [
'carga_citas.php',
'carga_sesiones.php'
],
eventClick: function(info) {
alert(info.event.extendedProps.description);
}
});
calendar.render();
});
</script>
Thanks for your replies.
the default behavor of selecthelper when resizing to a restricted zone(selectConstraint) is to hide the selectHelper, i want this to be exactly as event resize to a restricted zone(eventConstraint), where the event is visible and the size is the last allowed size.
this is the demo
http://jsfiddle.net/pu83thf9/3/
1)try to select from 10am to 2pm the selectHelper is hidden out of selectConstraint
2)try to create an event from 8-to 10 , try to resize it to 12 and don't release the mouse for 2 seconds, try now to resize it to 2pm, it's visible and not hidden like case 1
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
locale:"en",
minTime: "06:00:00",
maxTime: "20:00:00",
allDaySlot: false,
businessHours: true,
businessHours: [{
dow: [1, 2, 3, 4, 5], // Monday - Friday
start: '08:00',
end: '12:00',
}, {
dow: [1, 2, 3, 4, 5], // Monday - Friday (if adding lunch hours)
start: '13:00',
end: '17:00',
}],
selectConstraint: "businessHours",
eventConstraint: "businessHours",
defaultView: 'agendaWeek',
defaultDate: '2018-03-12',
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = 'Zone';
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
editable: true,
eventOverlap :false,
selectOverlap :false,
eventLimit: true, // allow "more" link when too many events
eventRender: function (event, element, view) {
element.find(".closeon").on('click', function () {
$('#calendar').fullCalendar('removeEvents', event._id);
});}
});
});
//example data for events
[
{
"jobId": 0,
"eventId": 79,
"title": "<b>2018-07-31 00029 Markosy Postal S.A.<\/b><br><span class='eventComment'>asfdasfsd<\/span>",
"start": "\/Date(1533542400000)\/",
"end": "\/Date(1533551400000)\/",
"color": "#FFCC00"
},
{
"jobId": 0,
"eventId": 80,
"title": "<b>2018-07-31 00029 Markosy Postal S.A.<\/b><br><span class='eventComment'>sfsdgs<\/span>",
"start": "\/Date(1533637800000)\/",
"end": "\/Date(1533646800000)\/",
"color": "#FFCC00"
},
{
"jobId": 0,
"eventId": 81,
"title": "<b>2018-07-31 00029 Markosy Postal S.A.<\/b><br><span class='eventComment'>dfdf s ddfsda ds fds 2222<\/span>",
"start": "\/Date(1533722400000)\/",
"end": "\/Date(1533727800000)\/",
"color": "#FFCC00"
},
{
"jobId": 0,
"eventId": 84,
"title": "<b>2018-07-31 00029 Markosy Postal S.A.<\/b><br><span class='eventComment'>gdgdfgsd<\/span>",
"start": "\/Date(1533808800000)\/",
"end": "\/Date(1533812400000)\/",
"color": "#FFCC00"
}
]
$('#calendar').fullCalendar({
locale: 'pl',
defaultView: 'agendaWeek',
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month,listWeek,year'
},
height: 'auto',
footer: false,
weekends: false,
slotEventOverlap: false,
timezone: 'local',
editable: true,
selectable: true,
events: {
url: '#Url.Action("GetGraphicCalendarEvents", "Schedule")',
textColor: 'black'
},
eventRender: function (event, element, view) {
var title = element.find('.fc-title, .fc-list-item-title');
title.html(title.text());
},
eventDrop: function (event) {
updateEventDate(event);
},
eventResize: function (event) {
updateEventDate(event);
},
select: function (startDate, endDate) {
$.ajax({
url: "#Url.Action("GraphicCalendarAddView", "Schedule")",
type: "post",
data: {
orderId: $("#OrderId").val(),
start: startDate.format("YYYY-MM-DD HH:mm:ss"),
end: endDate.format("YYYY-MM-DD HH:mm:ss")
},
success: function (result) {
if (result.hasOwnProperty("Success") && !result.Success) {
//error
} else {
//success
}
},
error: function (jqXHR, status, err) {
//error
}
});
},
eventClick: function (event) {
updateEventView(event);
}
});
I have a problem with FullCalendar https://fullcalendar.io/docs, I add some screenshot to explain my problem, When i click the button to show my calendar, but I only see not properly loaded events in calendar and when I click on any buttons of drag this thin strips it get fixed and calendar show everything properly.
I found the solution , the modal is not rendered, when the calendar is being rendered, I must add some delay.
example code: https://codepen.io/anon/pen/WKPyEN?editors=0010
$(function() {
$(".graphicPlanninngLetter").on("click", function() {
openCalendarWithView("GraphicPlanning");
});
function openCalendarWithView(action) {
showPopup("Test", "<div id='calendar'></div>");
setTimeout(function() {
$('#calendar').fullCalendar({
locale: 'pl',
defaultView: 'agendaWeek',
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month,listWeek,year'
},
allDaySlot: false,
height: 'auto',
footer: false,
weekends: false,
slotEventOverlap: false,
timezone: 'local',
editable: true,
selectable: true,
events: 'https://fullcalendar.io/demo-events.json',
eventRender: function (event, element, view) {
var title = element.find('.fc-title, .fc-list-item-title');
title.html(title.text());
},
});
}, 300)
}
function showPopup(title, content, button, selector) {
if (selector == undefined)
selector = "#popup";
$(selector + " .popupTitle").html(title);
$(selector + " .popupBody").html(content);
$(selector + " .popupButtons .additionalButtons").empty().append(button);
$(selector).modal("show");
}
});
I'm trying to set a default title and background color when selecting an event on fullcalendar. but the event is customized only after rendering it and not during its selection. Any idea? thx for your help.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
navLinks: true,
selectable: true,
selectHelper: true,
select: function(start, end) {
var eventData;
eventData = {
title: 'unavailable',
start: start,
end: end,
backgroundColor: 'red',
};
$('#calendar').fullCalendar('renderEvent', eventData, true);
$('#calendar').fullCalendar('unselect');
},
editable: true,
});
});
This is a jsfiddle
I have implemented fullcalendar and it is working fine apart from 2 issues (I'll raise the second one in another question).
I can't add an image as I don't have the reputation! So to explain what I mean, I have an event that runs from 10am, July 3rd to 10am July 5th. When viewed by month it only displays on the 3rd July and does not span the 4th or 5th.
Here is my implementation code;
$('#calendar').fullCalendar({
events:function(start, end, callback) {
$.ajax({
type: "POST",
url: 'webservices/wsEvents.asmx/GetEventsBetweenDates',
contentType: "application/json",
dataType: "json",
data: formatCalendarDates(start, end),
success: function (doc) {
var events = [];
$.each(doc.d, function() {
var duration = GetDuration($(this).attr('StartTime'), $(this).attr('EndTime'), true);
var allday = moment.duration(moment($(this).attr('EndTime'))-moment($(this).attr('StartTime'))).days() >=1 ? true : false;
// duration.toLowerCase().indexOf("day") >= 0 ? true : false;
events.push({
title: replaceCharacter($(this).attr('Title'), "/u0027", "'"),
start: $(this).attr('StartTime'),
id: $(this).attr('ID'),
description: replaceCharacter($(this).attr('Description'),"/u0027","'"),
allDay: allday,
locationID: $(this).attr('Location'),
location: replaceCharacter($(this).attr('LocationName'), "/u0027", "'"),
duration: duration
});
});
callback(events);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
// debugger;
ShowError("Error: " + textStatus);
}
});
},
theme: true,
header: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonIcons:{
prevYear: "ui-icon ui-icon-triangle-1-w",
prev: "ui-icon ui-icon-carat-1-w",
next: "ui-icon ui-icon-carat-1-e",
nextYear: "ui-icon ui-icon-triangle-1-e"
},
editable: false,
allDaySlot: true,
allDayDefault: false,
firstDay: 1,
timeFormat: {
month: "H:mm",
week: "",
day: ""
},
weekNumbers: true,
weekNumberCalculation: "iso",
weekMode: "liquid",
weekNumberTitle: "Wk",
defaultView: "month",
firstHour: 0,
buttonText: {
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
columnFormat: {
month: 'ddd', // Mon
week: 'ddd d/M', // Mon 9/7
day: 'dddd d/M' // Monday 9/7
},
eventClick: function (date, allDay, jsEvent, view) {
DisplaySingleEvent(date, false)
},
eventMouseover: function (event, jsEvent, view) {
$(this).css('cursor', 'pointer')
},
eventMouseout: function (date, allDay, jsEvent, view) {
$(this).css('cursor', 'default')
},
eventRender: function (event, element) {
},
viewDisplay: function (view) {
}
});
Can anyone see from my code what I've done wrong?
Thanks
Terry.
Educated guess: specify end in the events array. You give duration but this is not a standard attribute according to the spec.