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

Question

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.

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";
}

There's nothing in the fullCalendar API to enable this no. Maybe you could manipulate the DOM directly to achieve it — ADyson, Jul 14 '21 at 21:01
@NishargShah example? Can't you see the codepen resource? That is my problem and that is the example... — Watchmaker, Jul 15 '21 at 07:32
@ADyson how do you think I could achieve that? Using viewDidMount maybe? — Watchmaker, Jul 15 '21 at 07:35
You could try, off the top of my head I don't know if it gives you access to that bit or not. — ADyson, Jul 15 '21 at 08:14
Don't edit your post and excuse with us, we can see the edit history, so please accept your mistake — Nisharg Shah, Jul 15 '21 at 13:16
@NishargShah Totally my bad. I thought you hadn't seen the link, then I tried to open it myself and realized it was the wrong one but I forgot to comment again... My apologies — Watchmaker, Jul 15 '21 at 23:20

levi · Accepted Answer · 2021-07-18T00:10:22.917

2

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>");
  }}
/>

edited Jul 18 '21 at 00:10

answered Jul 18 '21 at 00:03

levi

23,693
18
59
73

1

Nice answer @levi The css one is ok, but with the Antd icons is a bit tricky. I would have to install fontawesome. The viewDidMount is the approach I finally followed but again with the svg Antd icon is a little different: ```viewDidMount={({ el }: {el:any}) => { const topLeftCorner = el.querySelector('.fc-timegrid-axis-frame'); ReactDOM.render(
, topLeftCorner); }}``` – Watchmaker Jul 20 '21 at 10:57

score 1 · Answer 2 · answered Jul 18 '21 at 00:21

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)
    }
  });

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

2 Answers2