Fullcalendar - Not able to display day names in Month view - javascript

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

Related

Set Time Zone To Germany in FullCalendar

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.

FullCalendar background color of row of today in AgendaWeek view and AgendaDay view

Can someone help me for the code to change the background color only of the row of today in agendaWeek view and agendaDay view in Fullcalendar? Here is code of my calendar:
<style>
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
#calendar {
max-width: 100%;
}
#calendar.agenda-week{
background-color: #FF9900;
}
</style>
//...
$('#calendar').fullCalendar({
locale: "es",
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
views: {
week: {
columnFormat:'ddd D',
},
},
defaultView: 'agendaWeek',
editable: true,
eventLimit: true, // allow "more" link when too many events
selectable: true,
selectHelper: true,
minTime: "09:30:00",
maxTime: "19:30:00",
slotLabelFormat: "h(:mm)a",
slotDuration: "00:30:00",
slotLabelInterval: "00:30:00",
businessHours:
{
start: '13:30',
end: '17:00',
dow: [1,2,3,4,5,6,0]
},
dayRender: function (date, cell) {
var today = new Date();
if (date.date() === today.getDate() && date.month() === today.getMonth())
{
cell.css("background-color", "#C0C0C0");//gray for today in month view
}
},
viewRender: function(view,element){
$("#calendar").addClass('agenda');//this change background color to orange for all views
},
//...
});
and here is the calendar at the moment
I hope i understood you correctly.
With CSS you can do the following:
#calendar .fc-agendaWeek-view .fc-today, #calendar .fc-agendaDay-view .fc-today {
background: red !important;
}

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

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?

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