I would like to change the First week of the year. fullcalendar.io
Current View
Shift the Start of week down
I'm afraid there is no builtin functionality for this. You could use such trick:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
weekNumbers: true,
viewRender: function(view, element) {
$('.fc-week-number').each(function(i, obj) {
var weekNumber = $(obj).find('span:first').text();
if ($.isNumeric(weekNumber)) {
if (parseInt(weekNumber) == 1) {
$(obj).find('span:first').text('');
} else {
$(obj).find('span:first').text(parseInt(weekNumber) - 1);
}
}
});
}
});
Here is the fiddle.
Related
the calendar shows the resources
Here is the code that generates the calendar
var calendarEl = document.getElementById('icalendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
headerToolbar: {
left: 'today prev,next',
center: 'title',
right: 'resourceTimelineDay resourceTimeline2Day resourceTimeline3Day'
},
footerToolbar: {
left: 'today prev,next resourceTimelineDay resourceTimeline2Day resourceTimeline3Day',
center: '',
right: ''
},
initialView: 'resourceTimelineDay',
resourceAreaWidth: '15%',
slotMinTime: '08:00',
slotMaxTime: '21:00',
slotDuration: '00:20:00',
resourceAreaHeaderContent: 'Inspection Calendar',
resources: resources,
events: events,
resourceLabelDidMount: function (arg) {
arg.el.style.background = arg.resource.extendedProps.color;
},
})
calendar.render();
});
I see the json in the console, first array is the resource that shows and the second array is the events
Does anyone know why this would be invalid and not show the event?
I am super confused
Issue was the date didn't match what i was looking for
what I'm possibly doing wrong!?
I do NOT see my events when 'defaultView: agendaWeek' (or agendaDay).
PS: basicWeek (or basicDay) works just fine.
BUT: when clicking the 'month' view: ALL events are showing correctly in 'month' view! Then, when again clicking 'week' (or Day) I see them ALL correctly as agendaWeek (or agendaDay) view!
I'm running fullcalendar: 3.6.2
PS: sorry, posted same issue in non-related forum
must miss a stupid thing - thanks for your time and hints, ed
<script type="text/javascript">
(function ($) {
#if (Model.tagColorsEnabled && Model.tagColors != null) {
<text>
var tagSet = [
#foreach (var tc in Model.tagColors)
{
#Display(tc)
}
];
var tagIndex = [];
for (var tag in tagSet) {
tagIndex[tagSet[tag].slug] = tag;
}
</text>
}
$('#calendar').fullCalendar({
locale: '#culture',
timeFormat: 'HH:mm', //eddie timeFormat: 'HH:mm{-HH:mm}',
slotLabelFormat: 'HH:mm', //eddie timeFormat: 'HH:mm{-HH:mm}',
// height: 500, //added by eddie
// allDay: false, // eddie
header: {
left: 'prev,next today',
center: 'title',
right: 'month, agendaWeek, agendaDay',
// right: 'month, agendaWeek, agendaDay' // eddie
},
eventRender: function (event, element) {
var colors = { bg : event.defaultBackgroundColor, br: event.defaultBorderColor, fg: event.defaultTextColor };
#if (Model.tagColorsEnabled)
{
<text>
var min = 100;
for (var klassNdx in event.className) {
var klass = event.className[klassNdx];
if (klass.substring(0, 4) === "tag-") {
var entry = tagIndex[klass.substring(4)];
if (entry !== undefined) {
if (entry < min) {
colors = tagSet[entry];
min = entry;
}
}
}
}
</text>
}
$(element)
.css("background-color", colors.bg)
.css("color", colors.fg)
.css("border-color", colors.br);
},
editable: false,
events: {
url: '#Url.Content("~/_Calendar/" + Model.queryId)',
},
// defaultView: '#Model.defaultView',
// defaultView: 'basicWeek',
defaultView: 'agendaWeek',
weekends: #Model.showWeekends
//viewRender: function (v, e) { alert("Rendering view"); }
});
})(jQuery);
</script>
solved - sort of!
When using 'defaultView: basicWeek / agendaWeek'; fact is that I get different DateTime info like:
basicWeek: '2017-1-06' --> which in turn works correctly!
agendaWeek: '2017-1-06T00:00:00' --> which results in an error!
When stripping off 'T00:.....' --> problem solved
I know that this is probably not the 'clean' solution BUT for the time being ..... will further check if time is available!
For now I like to thank ADyson for his advise and time spent.
I'm using fullcalendar with this select callback function in settings object:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
timeFormat: 'HH:mm',
slotLabelFormat:"HH:mm",
// slotDuration: '00:10:00',
allDayDefault: false,
editable: true
selectable: true,
select: function(start, end, jsEvent, view) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: moment(start).hour(12),
end: moment(end).hour(18),
editable: true
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
// $('div#event-editor').modal({ show: true });
});
The problem is that moment(end).hour(18) ads 18 hours to the end moment, causing an increased time until the event is finished. I need a function to effectively set the moment hour to '18' instead of '00'.
How can I show a description of Events in fullcalendar?
I have events that have a title and a description.
So how can I show the description?
When you add the title and description it will concatenate.
Using the below code, you can concatenate with the title:
eventRender: function (event, element, view) {
element.find('.fc-title').append('<div class="hr-line-solid-no-margin"></div><span style="font-size: 10px">' + event.description + '</span></div>');
},
Here is the working jQuery or JavaScript code.
I love Bootbox.js for showing message so I implemented that also here:
$(document).ready(function() {
var today_date = moment().format('YYYY-MM-DD');
console.log(today_date);
// $('#calendar').fullCalendar('gotoDate', today_date);
$('#calendar').fullCalendar({
theme: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek'
// right: 'month,basicWeek,basicDay'
},
// header: { center: 'month,agendaWeek' }, // Buttons for switching between views
defaultDate: today_date,
businessHours:
{
rendering: 'inverse-background',
dow: [0,1]
},
editable: false,
eventLimit: true, // Allow "more" link when too many events
events: myevents,
eventRender: function (event, element) {
element.attr('href', 'javascript:void(0);');
element.click(function() {
bootbox.alert({
message: 'Description : '+event.description,
title: event.title,
});
});
}
});
});
My fullcalendar has - "Month|Week|Day" view , I want to remove or hide the "Week" and "Day" views as we have been using only "Month" View.
Can you please tell me how to do this?
When you start fullcalendar, don't include agendayDay and agendaWeek. Something like
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'month'
}
});
Update:
To get rid of the month button:
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: ''
}
});
right : false is working.
$('#calendar').fullCalendar({
header: {
left: 'prev,next ',
center: 'title',
right: false,
},
});