CODEWITHSUNDEEP
reactjsfullcalendarfullcalendar-5
Watchmaker
Watchmaker

Reputation: 5308

FullCalendar - Is it possible to set custom content on the top left cell?

In order to fulfill design requirements a custom icon/text has to be shown in the top left corner of a FullCalendar with timeGridWeek and resourceTimeGridDay views.

I have tried but maybe it is not possible, BTW I am under FullCalendar v5 and React 17*

So just to make myself clear, I want in this sample:

example

initialView: 'timeGridWeek',

To set custom content on the top-left cell, like a map legend.

enter image description here

After following some suggestions here I ended up like:

   viewDidMount={({ el }: {el:any}) => {                             const topLeftCorner = el.querySelector('.fc-timegrid-axis-frame');                             ReactDOM.render(<div className="fullcalendar-top-left-icon"><WhateverAntdIcon /></div>,                                 topLeftCorner)}}

But since I also have dayMinWidth prop my approach only works for desktop so far. I still have to find a way to make it work for mobile or use the css approach and install awesomefont.

Finally I did it with FontAwesome as @levi suggested, thanks!. I just added the @font-face to avoid overloading my bundle:

@font-face {
font-family: "FontAwesome";
font-weight: normal;
font-style : normal;
       src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
       src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
             url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
             url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
             url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
             url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}

.fc-timegrid-axis-frame::before { {
    font-family: FontAwesome;
    content: "\f024";
}

Upvotes: 3

Views: 3186

Answers (2)

charlietfl
charlietfl

Reputation: 171669

You can use the viewDidMount render hook and target that element inside it

 var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    initialView: 'timeGridWeek',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'timeGridWeek,timeGridDay'
    },
    events: 'https://fullcalendar.io/demo-events.json',
    viewDidMount :function(view){
      
      view.el.querySelector('.fc-timegrid-axis-frame').innerHTML ='Foo'
      console.log(v)
    }
  });

Upvotes: 2

levi
levi

Reputation: 25111

Looks like that cell has a unique class of fc-timegrid-axis. One method would be to use that class to add a pseudo element with your desired content. You can use something like fontawesome or a background image, if you want to render an image.

.fc-timegrid-axis:after {
  content: 'hello'
}

The other option would be, binding on the viewDidMount hook, and mutate DOM element directly:

<FullCalendar
    viewDidMount={({ el }) => {
       $(el).find('.fc-timegrid-axis').html("<span>Your content</span>");
  }}
/>

Upvotes: 2

Related Questions