fullcalendar set slotDuration not working - javascript

i have a calendar working with the following code:
$( document).ready( function(){
$('#calendar').fullCalendar( {
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay' },
editable: true,
slotDuration: '00:15:00',
defaultView: 'agendaWeek',
eventLimit: true,
events: source
}
)}
Following this flddle, i tried to set the slotDuration to 15 min, but it's not working. It just uses the default 30 min.
The only hint i get is this error when i open the calendar on Chrome:
Failed to get text for stylesheet 37: No style sheet with given id found
Any idea of which might be the problem?

Related

FullCalendar Events Misalignment

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',

Fullcalendar How do I change date format to UK calendar format

I'm using FullCalendar v3.5.1 plugin which uses US calendar format by default. How could I change it to UK format dd/mm/yyyy.
$('#calender').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultView: 'basicWeek',
events: function(start, end, timezone, callback) {
}
});

You want to set the locale as 'en-gb' like as follows.
Here is a jsfiddle working. You also need to retrieve https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.0/locale-all.js
If you look at resources on the left you can see what libraries you need.
Below you can see the code you need.
...
$('#calender').fullCalendar({
locale: 'en-gb',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultView: 'basicWeek',
events: function(start, end, timezone, callback) {
}
});

Disable and activate FullCalendar

I want to initially set the editable, selectable, droppable and events to false (or not), when the user clicks a button, retrieves the data successfully, then set them to true. I'm a newbie and I don't know how to handle it with js
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
height: function () {
return $(window).height() * 0.7;
},
allDaySlot: false,
defaultView: 'agendaWeek',
//Here is the part I want to add after receiving user submitted data
editable: true,
selectable: true,
droppable: true,
events: "...",

Time slots are not appearing in full calendar components

Iam working on full calendar version v3.2.0.But In week and time view,Time slots are not appearing in left hand column
I have tried following Code in calendar:
$('#calendar').fullCalendar({
header: {
left: 'today prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
contentHeight:'auto', //auto
slotDuration: '00:15:00',
slotLabelInterval: 15,
slotLabelFormat: 'h(:mm)a',
defaultDate: moment().format("YYYY-MM-DD"),
navLinks:true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
weekends: component.get('v.weekends'),
eventBackgroundColor: component.get('v.eventBackgroundColor'),
eventBorderColor: component.get('v.eventBorderColor'),
eventTextColor: component.get('v.eventTextColor'),
events: eventArray,

Cannot read property 'datepickerLocale' of undefined

This may be a specific issue but I am stuck after quite some debugging done. Maybe a fresh pair of eyes would see something I am missing. I have posted only the relevant code snippets, as it is a bigger app.
Everything works fine, however I keep getting this error and I don't exactly know what would be causing it and how it could affect the code.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaDay',
defaultTimedEventDuration: '00:10:00',
locale: 'ro',
timeFormat:'H:mm',
slotLabelFormat:"HH:mm",
axisFormat: 'H:mm',
navLinks: true,
selectable: true,
selectHelper: true,
allDaySlot: false,
eventClick: function(calEvent, jsEvent, view) {
editEvent(calEvent);
},
eventLimit: true // allow "more" link when too many events
});
console.log('The right one');
$("#starts-at").datetimepicker({
minDate: new Date(),
locale: 'ro'
});
$("#starts-at-edited").datetimepicker({
minDate: new Date(),
locale: 'ro'
});
<script src='vendor/jquery.min.js'></script>
<script src='vendor/bootstrap.min.js'></script>
<script src='vendor/moment.min.js'></script>
<script src='vendor/fullcalendar.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src='vendor/locale/ro.js'></script>
<script src='calendar.js'></script>

Categories