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);
}
}
Related
My site is hosted on a server in an Asian country. And I want to change the time zone for displaying the events to Germany, but unfortunately it doesn't work.
i'm used timezone: 'Europe/Berlin' in fullCalendar
But this Code not work !!!
thank you
Edit :
a.$calendarObj = a.$calendar.fullCalendar({
slotLabelFormat: 'HH:mm',
slotDuration: "00:10:00",
minTime: "00:00:00",
maxTime: "23:59:00",
defaultView: "month",
allDaySlot: 0,
handleWindowResize: !0,
height: l(window).height() - 200,
header: {
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay"
},
events: "/Calender/GetEvents",
editable: 1,
droppable: 1,
eventLimit: 1,
selectable: 0,
displayEventTime: 1,
timezone: 'Europe/Berlin'
});
is not fix for me.
i change timezone:
timezone: 'Europe/Berlin' to timezone: 'local'
and buy new server from Germany and it fixed.
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'
}
For fullCalendar I have written the code below:
$('#mycalendar').fullCalendar(
{
allDaySlot:false,
slotDuration: '00:30:00' ,
//slotMinutes: '120',
lang: currentLangCode,
minTime: '4:00am',
maxTime: '24:00pm',
slotEventOverlap: true,
slotLabelFormat:'h(:mm)a',
showAgendaButton: true,
columnFormat: { month: 'ddd', week: 'ddd M/D', day: 'ddd M/D' },
timeFormat: 'H:mm',
defaultView: 'listWeek',
eventLimit: true,
theme:false,
editable: true,
contentHeight:'auto',
weekends: false ,
//timezoneParam: 'America/Los_Angeles',
//ignoreTimezone: false,
header:
{
left: 'prev,next today',
center: 'title',
// right: 'agendaWeek'
right: 'month,agendaWeek,agendaDay,listWeek'
},
views: {
listDay: { buttonText: 'Day' },
listWeek: { buttonText: 'Week' },
month: {
columnFormat: 'ddd'
},
agenda: {
columnFormat: 'ddd'
}
},
I am getting below error for agendaWeek and agendaDay:
I am using:
jQuery JavaScript Library v3.3.1
FullCalendar v3.9.0
It's because your values for minTime and maxTime and invalid and not parseable as momentJS objects. fullCalendar relies on momentJS to do its date and time processing. Because of this the calendar does not know where to start the display (and thus where the "top" of the calendar is, hence the error message).
Set them to
minTime: '04:00',
maxTime: '24:00',
instead.
See here for a working demo: http://jsfiddle.net/sbxpv25p/581/
See http://momentjs.com/docs/#/parsing/string/ for a list of valid date/time formats which momentJS can recognise. You'll see that "am" and "pm" are not recognised items. In any case they are also unnecessary since you're already specifying the time in 24hr format.
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?
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"