JQuery fullcalendar - events

Question

I am working with jQuery fullcalendar (version 2.7.1).

This is what I want to do:

Now I can set the background to red, but the text is not displayed. This is what I do:

var m = moment('2016-09-19'); $('#calendar').fullCalendar({ // put your options and callbacks here left: 'title', center: '', right: 'prev,next', weekends: false, weekNumbers: true, defaultView: 'month', defaultDate: m, events: [ { start: '2016-09-19', allDay : true, rendering: 'background', backgroundColor: '#F00', title: 'full', textColor: '#000' }, { start: '2016-09-20', allDay : true, rendering: 'background', backgroundColor: '#F00', title: 'full', textColor: '#000' } ] }); 

Here's what it looks like:

Therefore, the text is not added .... And the color is much lighter than the specified color.

As you can see, I also did not add “today” to the right navigation, but he added in any case ...

I am also wondering how I can limit the navigation of the months. That they, for example, can choose only the month of September, October, November in 2016.

Can someone help me with these questions?

Answer 1

You can use eventAfterRender callback. In this callback, add the string FULL to element . You can apply the CSS style to this using the event-full class.

background-color easier because there is an opacity of 0.3 ; change it to 1 using the event-full class.

To hide the today button, you must set the left, center, right properties in the header object.

To limit the navigation of months, you can use the viewRender callback.

Js

 var m = moment('2016-09-19'); $('#calendar').fullCalendar({ // put your options and callbacks here header: { left: 'title', center: '', right: 'prev,next' }, weekends: false, weekNumbers: true, defaultView: 'month', defaultDate: m, events: [{ start: '2016-09-19', allDay: true, rendering: 'background', backgroundColor: '#F00', title: 'full', textColor: '#000', className: 'event-full' }, { start: '2016-09-20', allDay: true, rendering: 'background', backgroundColor: '#F00', title: 'full', textColor: '#000', className: 'event-full' }], eventAfterRender: function (event, element, view) { element.append('FULL'); }, viewRender: function (view, element) { var start = new Date("2016-09-01"); var end = new Date("2016-11-30"); if (end < view.end) { $("#calendar .fc-next-button").hide(); return false; } else { $("#calendar .fc-next-button").show(); } if (view.start < start) { $("#calendar .fc-prev-button").hide(); return false; } else { $("#calendar .fc-prev-button").show(); } } }); 

CSS

 .event-full { color: #fff; vertical-align: middle !important; text-align: center; opacity: 1; } 

WORKING DEMO

Answer 2

I am using a CSS-based solution, because in this case it seems simpler to let the library do what it is intended to do and work with it. The Today button has a specific class, so I would display: no. Event objects can accept class recognition. Using this, I created the: before element to create the text "FULL". Finally, your color variation is due to an opacity of 0.3 on these cells. Setting this parameter to 1 shows the full red color of the background that is being applied. \

 .fc-today-button { display: none; } .event-full { position: relative; opacity: 1; &:before { content: "FULL"; position: absolute; color: #fff; top: 50%; transform: translateY(-50%) translateX(-50%); left: 50%; } } 

and JS:

 var m = moment('2016-09-19'); $('#calendar').fullCalendar({ // put your options and callbacks here left: 'title', center: '', right: 'prev,next', weekends: false, weekNumbers: true, defaultView: 'month', defaultDate: m, events: [ { start: '2016-09-19', allDay : true, rendering: 'background', backgroundColor: '#F00', title: 'full', textColor: '#000', className: 'event-full' }, { start: '2016-09-20', allDay : true, rendering: 'background', backgroundColor: '#F00', title: 'full', textColor: '#000', className: 'event-full' } ] }); 

http://codepen.io/amishstripclub/pen/zqQqxx

Answer 3

I would use a disabled attribute instead of buttons and buttons:

https://jsfiddle.net/uz0mx059/

  viewRender: function(view, element) { var start = new Date("2016-09-01"); var end = new Date("2016-11-30"); if (end < view.end) { $("#calendar .fc-next-button").attr('disabled',true); return false; } else { $("#calendar .fc-next-button").attr('disabled',false); } if (view.start < start) { $("#calendar .fc-prev-button").attr('disabled',true); return false; } else { $("#calendar .fc-prev-button").attr('disabled',false); } } 

Plus a bit of css:

 button:disabled { color: grey; }