Time slots are not appearing in full calendar components - javascript

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,

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

Full calendar Jquery plugin, I want to show month instead of prev and next arrow

For example, I want to display a month instead of prev and next arrow. ?I have added the image below.
This is my code,
$('#calendar').fullCalendar({
header: {
left: 'prev',
center: '',
right: 'next'
},
contentHeight: 1050,
columnHeaderFormat: 'dddd',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2018-09-01'
}
]
});
});
Please help me to fix this,
Thanks.

Fullcalendar - Half Hour Event Title Issue

The answer at Fullcalendar event's end time is missing is for an older version of fullcalendar. It's not the answer I want.
In my fullcalendar application, when I create a "half-an-hour" event it just show only event start time and title at week view.
For one hour and longer events, there are no problems I encounter. It only happens at "half-an-hour" events. So, I don't know if this is a feature or not.
I want my events to be displayed like "08:00 - 08:30" (start - end) even for half an hour events.
My code:
var calendar = $('#calendar').fullCalendar({
allDaySlot: false,
eventOverlap: false,
selectOverlap: false,
editable: false,
eventStartEditable: false,
eventDurationEditable: false,
timezone: 'local',
timeFormat: "HH:mm",
minTime: "08:00:00",
maxTime: "20:00:00",
header: header,
selectable: true,
selectHelper: false,
defaultView: "agendaWeek",
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
view: {
agendaWeek: {
columnFormat: "M/D [(]ddd[)]"
}
},
select: function(start, end, allDay) {
...
}
eventClick: function(calEvent, jsEvent, view) {
...
}
});
ScreenShot (SS):
Note: Sometimes even event titles cannot be seen in the week view of Fullcalendar.

I cant get data from day where I drop in full calendar

I have this fullcalendar:
$('#calendar').fullCalendar({
height: 700,
locale: 'es',
header: {
left: 'prev,next, month basicWeek today',
center: 'title',
right: ''
},
buttonText: {
today: 'Hoy',
month: 'Mes',
week: 'Semana'
},
editable: true,
weekends: true,
droppable: true, // this allows things to be dropped onto the calendar
dragRevertDuration: 0,
events: $scope.events,
drop: function(date, jsEvent, ui, resourceId) {
console.log("DROP!")
}
});
I would like in drop event, get data of this day.
I drag event and drop in day 1, that it has an event called "Carmen Donoso | BAJA", and when I drop it I would like to get this event.
Thanks

fullcalendar set slotDuration not working

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?

Categories