Time labels hide when I change slotduration to "some values" - javascript

I am making a editor, this is def:
$('#calendar').fullCalendar({
slotDuration: $('input[name="duration"]').val(),
minTime: $('input[name="start"]').val(),
maxTime: $('input[name="end"]').val(),
defaultView: $('#default_view').val(),
defaultDate: $('input[name="date"]').val(),
fixedWeekCount: false,
handleWindowResize: true,
height: $(window).height() - 200,
header: {
left: 'prev,next today',
center: 'title',
right: $('#views').val().join(),
},
editable: true,
droppable: true,
eventLimit: true,
selectable: true
});
When I change slotDuration with something like-
00:35:00 or
00:41:00 or
00:45:00
This happens:
But when, slotDuration is 00:15:00, the labels are displayed like:
When I change duration to 3 mins or 30 mins or 1 hour or 2 or 3 and some more in some fixed pattern... it does display time labels. But for some it doesn't,Why is this happeningg?

Related

How to display only one AM and PM time in Full calendar js

I know that time format issue has been already discussed. But stills i can't solve my problem.
My requirement looks like
Here I want to display all AM interval in a single AM and all PM time in a single PM.
Here is my code
$(document).ready(function() {
$("#calendar").fullCalendar({
header: {
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay"
},
defaultView: "agendaWeek",
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
editable: true,
eventLimit: true, // allow "more" link when too many events
format: 'DD/MM/YYYY',
});
});
replace format with this two line
timeFormat: "H:mm",
slotLabelFormat: "HH:mm",

How to show only event appearing rows in FullCalendar.js

I am using FullCalendar v3.9.0 and need to show rows if it has any events only for week and day view. Pleas see the below image:
As you can see, above calendar showing rows of 8 AM to 12 PM. but it only has events from 9 to 11 AM. Thus I just want to show calendar from 9 AM to 11 AM.
I have tried it using filterResourcesWithEvents: true, but it didnt worked. Please see my code below:
$('#calendar').fullCalendar({
header: {
left: '',
center: 'prev, title, next',
right: 'today, month,agendaWeek,agendaDay,listWeek'
},
views: {
agendaWeek: {
columnHeaderFormat: 'ddd D/M',
}
},
minTime: "08:00:00", //I have tried by commenting this as well.
maxTime: "23:00:00", //I have tried by commenting this as well.
defaultDate: output,
filterResourcesWithEvents: false,
slotEventOverlap : false,
contentHeight: 2000,
navLinks: false,
editable: false,
eventLimit: true,
height: "auto",
events: course_data,
defaultView: 'agendaWeek'
});
Looking hopefully to have some suggestions or answer, Thanks!!

Fullcalendar - Not able to display day names in Month view

I'm using full calendar 3.4 and trying to show day names in the month view, but nothing seems to work.
Works fine in Week view though.
Tried multiple different things and here is my configuration:
$('#calendar').fullCalendar({
defaultView: 'month',
weekNumbers: true,
selectable: true,
selectHelper: true,
selectOverlap: false,
timeFormat: 'H:mm',
firstDay: 1,
views: {
month: {
columnHeaderFormat: 'ddd'
}},
header: {
right: 'prev,next today',
left: 'title',
center: 'month,agendaWeek,agendaDay'
} });
Any ideas how I can make it to work?
What momnet version you are using ? Try this code snippet. I can see day names in the header.
(function($) {
$(document).ready(function() {
var fullcalendar = $('#calendar').fullCalendar({
defaultView: 'month',
weekNumbers: true,
selectable: true,
selectHelper: true,
selectOverlap: false,
timeFormat: 'H:mm',
firstDay: 1,
views: {
month: {
columnHeaderFormat: 'ddd'
}
},
header: {
right: 'prev,next today',
left: 'title',
center: 'month,agendaWeek,agendaDay'
}
});
});
})(jQuery)
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" />
<div id="calendar"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
columnFormat: {
month: 'dddd'
}

Changing time interval in weekly calendar

Right now my Weekly Calendar shows up with one hour of interval. I'd like to know if it's possible to change this interval as I like (e.g 1hour30min interval).
My code to build the calendar:
$('#calendar').fullCalendar({
header: false,
height: 800,
defaultView: 'agendaWeek',
views: {
week: {
columnFormat: 'dddd'
}
},
firstDay: 1,
weekends: false,
});
Try out this
$("#calendar").fullCalendar({
header: false,
height: 800,
defaultView: 'agendaWeek',
views: {
week: {
columnFormat: 'dddd'
}
},
firstDay: 1,
weekends: false,
allDaySlot: false,
slotDuration: "01:30:00"
});
http://jsfiddle.net/5ax71o58/
You can set slotLabelInterval:
slotLabelInterval: "01:30:00"

how to set default time for fullcalendar in month view

I'm using fullcalendar from http://fullcalendar.io
I have it setup for only selecting slots between 9am-5pm, although when in month view if a day is clicked it automatically tries to schedule for 12:00am (00:00:00) --- is there a way to set the default time on month view to 9am ?
my config:
$calendar.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
height: 475,
defaultDate: moment(),
defaultView: 'agendaWeek',
minTime: "09:00:00",
maxTime: "17:00:00",
titleFormat: "MMMM D, YYYY",
columnFormat: "ddd. MMMM D",
weekends: false,
editable: false,
allDaySlot: false,
eventOverlap: false,
eventDurationEditable: false,
eventLimit: true, // allow "more" link when too many events
eventSources: ['events.php'],
timeFormat: 'h:mm',
businessHours: { start: '09:00', end: '17:00' }
});
EDIT - I found a small solution by doing what i posted below but i'm wondering if there is another way around in the configuration?
dayClick: function(date, jsEvent, view) {
var time = moment(date).format('HH:mm:ss');
if (time == "00:00:00") {
date = moment(date).set('hour', 9);
}
}

Categories

Resources