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,
},
});
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
Hello look at this example, when I drop the event I don't have the END date and therefore when I click on it I miss this date bring in the edit form
https://jsfiddle.net/max1974/msnyk1oL/1/
$('#external-events .fc-event').each(function() {
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function() {
$(this).remove();
},
eventReceive: function(event) {
alert(JSON.stringify(event, null, 4));
},
eventClick: function (event) {
alert(JSON.stringify(event, null, 4))
}
});
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.
I want to add background color for the whole day and not the event background alone. For the code that i have written now, i could see events alone as background
My view code is as follows:
<script>
$(document).ready(function() {
$.ajax({
url: "<?php echo base_url() ?>/cmn/calendar/show_holidays",
type: 'POST', // Send post data
data: 'type=fetch',
async: true,
success: function(s){
holidays = s;
$('#calendar').fullCalendar('addEventSource', JSON.parse(holidays));
}
});
/* initialize the calendar
-----------------------------------------------------------------*/
$('#calendar').fullCalendar({
utc: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,
});
});
And My codeigniter controller code is as follows:
public function show_holidays()
{
$type = $_POST['type'];
$holidays=$this->calendar_m->show_holidays();
foreach($holidays as &$val){
$val['allDay'] = 'true';
$val['Rendering'] = 'Background';
$val['textColor'] = '#000';
$val['title'] = 'Holiday today'
$val['backgroundColor'] = 'yellow'; // added background color to all the holidays
}
echo json_encode($holidays);
}
So i am passing the data through json. I get the output as follows:-
Now i want the yellow color event to be look like the background color in sundays.(i.e.) background color for the whole day not for the event alone.
Is it possible through 'addEventSource'? Thanks in advance.
Your code is fine. You just have a tiny case sensitive mistake
$val['Rendering'] = 'Background';
change it to
$val['rendering'] = 'background';
Both the 'R' and 'B' to 'r' and 'b'
The following is the fiddle that displays the output. I got the background color for the whole day and not the event background alone. It is achieved through 'addEventSource'
Hope this Helps..!
var jsonEvents =
[{allDay
:
"true" ,
backgroundColor
:
"red" ,
id
:
13 ,
rendering
:
"background" ,
start
:
"2016-05-01" ,
textColor
:
"white" ,
title
:
"Mayday",
className
:
"event-full"
}]
$('#calendar').fullCalendar({
utc: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,
eventAfterRender: function(event, element, view) {
element.append(event.title);
}
});
$('#calendar').fullCalendar('addEventSource', jsonEvents);
https://jsfiddle.net/xxrznf2j/
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,
});
});
}
});
});