'Adding custom Text in right part of toolbar

I am using the fullcalendar component and I have found it very interesting to manage events. I want to add some custom message in the right corner of header to the user. I tried the following

    $(document).ready(function(){
         $('#calendar').fullcalendar({
           header:{
              left: 'prev,next,today',
              center: 'title',
              right: 'Manage your events'
           }

    });
})

But it does not show in the right corner of the header. I have been able to render custom text like following

$(document).ready(function(){
         $('#calendar').fullcalendar({
           header:{
              left: 'prev,next,today',
              center: 'title',
              right: 'title'
           },
           titleFormat: '[Manage your events]'


    });
});

But by doing this, calendar component start showing same text in middle and right corner of the toolbar. What I want is to show custom text in right corner and show default title (which is month + year) in the center part of the toolbar. How can I do it?

jqueryfullcalendar


Solution 1:[1]

enter image description hereAs I understand it the header option can only display specific calendar elements, not custom text. http://fullcalendar.io/docs/display/header/.

"But by doing this, calendar component start showing same text in middle and right corner of the toolbar." - of course it does - you have 'title' in center and right. It is doing what the docs say it will do. ...

titleFormat appears to be expecting a format string not text. Again; this is as per the docs: http://fullcalendar.io/docs/text/titleFormat/ .... It isn't intended for the purpose you are trying to use it for.

It may well be that it isn't designed to show custom text in the header bar. Looking at the demo http://fullcalendar.io/ that is how it looks. In which case you could show nothing in the right (just don't use right in header) and then do some custom css. (maybe target the element and try to add your custom text with :content?)

Update. I went to the demo http://fullcalendar.io/ and poked about with the element inspector in Chrome. I found the css for the right hand element and added this:

.fc-toolbar .fc-right:before {
    float: right;
    content: 'My Custom Text';
}

That worked for me.

Solution 2:[2]

I was looking for something similar today, but in my case I just wanted to insert custom text in the center element of the toolbar. After looking at the CSS for the header toolbar, I came up with this to put my text into the center of the toolbar (this is on version 5.3.0 of fullcalendar-scheduler, no idea if the CSS is the same on other versions):

.fc-header-toolbar > .fc-toolbar-chunk:nth-child(2)::before {
  font-size: 1.75em;
  content: 'My Custom Header Text';
}

Hope this helps someone else.

Solution 3:[3]

In FullCalendar V5, you can try this:

viewClassNames: function(view) {
    $('.fc-dayGridMonth-button').before("\
        <div class='label' style='line-height: 30px;margin-top:5px'>\
        <i class='fa fa-square' style='color:#0aa858;font-size:14px'>&nbspAA&nbsp</i>\
        <i class='fa fa-square' style='color:#ffbc32;font-size:14px'>&nbspBB&nbsp</i>\
        <i class='fa fa-square' style='color:#f4433c;font-size:14px'>&nbspCC&nbsp</i>\
        <i class='fa fa-square' style='color:#a5a5a5;font-size:14px'>&nbspDD&nbsp</i>\
        <i class='fa fa-square' style='color:#5B9BD5;font-size:14px'title='EEEE'>&nbspEE&nbsp</i>\
        <i class='fa fa-square' style='color:#ED7D31;font-size:14px'title='FFFF'>&nbspFF&nbsp</i>\
        <i>&nbsp;&nbsp;&nbsp;&nbsp</i>\
        </div>\
    ");
},

In FullCalendar V3:

eventAfterAllRender: function(view) {
  // $('.fc-month-button').before("\
},

So view looks like this: enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Robert
Solution 3

Related Questions