I have some events which doesn't need to be dragged around only be fixed on the position and some would be draggable.
var calendar = new Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
header: {
left: 'prev,next today',
center: 'title',
right: "dayGridMonth,timeGridWeek,timeGridDay"
//right: "dayGridMonth"
},
businessHours: true, // display business hours
editable:false, //switching within calendar would stop
events: AllEvents,
droppable: false, // this allows things to be dropped onto the calendar
})
If i set editable:false it stops dragging all the events but i want only specific events to be stopped dragging. How can i do that .. ?
Found the solution to my problem.
{
title: 'This must be editable',
start: new Date('11/1/2011'),
editable:true //true or false can set draggable in it
}
Here is the Url for the solution.
Jquery FullCalendar change editable properties of particular event on a calendar
Related
I have an instance of FullCalendar (v1) where each event does not align with the corresponding time slot, but only initial load. As soon as the browser is zoomed or restored (up or down) or resized, it corrects itself. Has anyone seen something like this? Nothing special in the setup.
$('#calendar').fullCalendar({
theme: true,
selectable: true,
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
header: { left: 'title', center: 'month,agendaWeek,agendaDay', right: 'prev,next,today' },
aspectRatio: 1,
slotDuration: '00:30',
minTime: '08:00',
maxTime: '18:59',
When user selects event type and no. of hours from dropdown then it should be added to the calendar. I have updated the event listener still no data is showing. Sorry if it seems a trivial question. i am new to web applications and a bit time strained.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek'
},
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
});
});
ok1.addEventListener('click',function() {
let date = moment($('#calendar').fullCalendar('getDate'));
let val = document.getElementById('inputGroupSelect02').value;
let desc=document.getElementById('nobh').toString();
$('#calendar').fullCalendar('renderEvent',
$('#calendar').fullCalendar({events: [{
start: date,
title: val,
description: desc
}]}),true);
},true);
Thanks #ADyson following worked:-
$('#calendar').fullCalendar('renderEvent', { start: date, title: val, description: desc }, true);
Using FullCalendar I am able to display 2 calendars on the same page. Calendar1 has all the controls to switch views from Day, Week, Month, Year plus the arrows to go forward/backwards. Calendar2 is a listMonth with no controls showing. It works fine on load but I would like it to change when Calendar1 changes from month to month or year to year.
Is this possible? I haven't found anything that would allow me to change the listMonth when the month/year changes on Calendar1.
jQuery(document).ready(function () {
$('#calendar1').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month,listYear'
},
views: {
listYear: { buttonText: 'Year'}
},
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
events: "CalendarData.ashx",
eventColor: '#038ddd'
});
$('#calendar2').fullCalendar({
header: {
left: '',
center: '',
right: ''
},
views: {
listMonth: { buttonText: 'Month' }
},
defaultView: 'listMonth',
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
events: "CalendarData.ashx",
eventColor: '#038ddd'
});
});
I had a need to implement this recently to sync a grid and list view. I came across this question, but the suggested comments no longer appear valid. Here is a simple solution I used.
This is the simple html container for both calendars.
<div>
<div id="calendarGrid"></div>
<div id="calendarList"></div>
</div>
Below is the javascript code to hook into the "datesSet" method that triggers as the user navigates through the calendar and sets the date for the "other" calendar to keep it in sync, including a date comparison to prevent an infinite loop.
var calendarElGrid = document.getElementById('calendarGrid');
var calendarElList = document.getElementById('calendarList');
var calendarGrid = new FullCalendar.Calendar(calendarElGrid, {
initialView: 'dayGridMonth',
datesSet: function (info) {
syncCalendar(calendarList, info.start);
}
});
calendarGrid.render();
var calendarList = new FullCalendar.Calendar(calendarElList, {
initialView: 'listMonth',
datesSet: function (info) {
syncCalendar(calendarGrid, info.start);
}
});
calendarList.render();
function syncCalendar(otherCalendar, startDate) {
if (otherCalendar.getDate().toDateString() != startDate.toDateString()) {
otherCalendar.gotoDate(startDate);
}
}
Solution is based off of v6.0.2 documentation here:
https://fullcalendar.io/docs/datesSet
Im using FullCalendar jquery library for creating events.
The requirement here is to create recurring events every x days.
For example create an event that is recurring on each second Monday (every 14 days in this case).
Currently the library supports weekly or monthly recurring events.
How can I achieve this?
I think #CBroe is correct, you could achive this using your own logic.
To add events to the calendar you must first populate an array of events, this can then be bound to the calendars events property.
For example:
var events = getEvents();
$('#myCalendar').fullCalendar({
themeSystem: 'bootstrap3',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
weekNumbers: true,
weekends: false,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventStartEditable: false,
height: 'auto',
eventLimit: true, // allow "more" link when too many events
events: events,
viewRender: function (view, element) {
events = getEvents();
$('#myCalendar').fullCalendar('removeEvents');
$('#myCalendar').fullCalendar('addEventSource', events);
},
});
function getEvents(){
var events = [];
var arrayOfDates; //Populate dates at intervals of 14 days
$.each(arrayOfDates, function () {
var date = this;
//Create event
events.push({
title: 'myEvent',
start: date,
end: date,
allDay: true,
color: '#228B22',
stick: true
});
});
}
return events;
}
Well something like that anyway.. this should give you a good starting point
below is my code. i don't know why the calendar are working but no event displayed. I very appreciate your help.
var eventSTR = [{start: '2016-11-21',end: '2016-11-23',overlap: false,rendering : 'background', color: '#ff9f89'},];
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'month',
},
defaultDate: today,
navLinks: false, // can click day/week names to navigate views
businessHours: true, // display business hours
editable: false,
event : eventSTR
});
});
You're 99% there, just missing 2 things
1) you need to set the today variable before you set the document ready function:
var today = new Date();
2) you've misspelled the events property. You have:
event : eventSTR
it should read:
events : eventSTR