0

In the FullCalender I am using the event name is in bold. You can see it in the below image

Full calender week list view

But I want the event name to be normal and not bold but start-end times should still be bold. Is there a solution for it ? The below is my code

                   <FullCalendar
                      header={{
                        left: 'prev,next today myCustomButton',
                        center: 'title',
                        right: 'month,listWeek'

                      }}
                      views={{
                        listWeek: { buttonText: 'Week' },
                        month: { buttonText: 'Month' }
                      }}
                      timeFormat= 'H:mm'
                      plugins={['interaction']}
                      selectable={true}
                      fixedWeekCount={false}
                      defaultView={this.state.calendarView}
                      navLinks={true} // can click day/week names to navigate views
                      navLinkDayClick={this.dayClick}
                      editable={false}
                      eventLimit={2} // allow "more" link when too many events
                      eventClick={this.calendarClick}
                      events={aclCheck("EventView") && this.props.events && this.props.events.rows ? this.state.events : []}
                      viewRender={(view, element) => {
                        if (view.type !== this.state.calendarView)
                          this.setState({ calendarView: view.type })
                      }}
                      showNonCurrentDates={false}
                      dateClick={(info) => {
                        alert('clicked ' + info);
                      }}
                      select={(info, info1) => {
                        this.selectedDate = {start: info, end: info1}
                      }}
                      unselectCancel="button"
                      unselect={() => this.props.selectCalendarDates(undefined)}

                    />
Haris George
  • 291
  • 5
  • 16
  • I guess you might use .fc-title class to update the style for event title – Khurram Ishaque Dec 11 '19 at 05:42
  • So, did it worked for you ? Can you please show the code that you tried ? – Khurram Ishaque Dec 11 '19 at 07:27
  • @KhurramIshaque .Thanks for your reply. I tried it like this The function is customEventRender = info => { info.el.className = "custom-event-container fc-day-grid-event fc-h-event fc-event fc-start fc-end" info.el.children[0].className = "custom-event-container fc-title" return info.el }; } But it updates the all instead of event title alone. – Haris George Dec 11 '19 at 07:40
  • Please check this out : https://stackoverflow.com/a/28488038/1945030 – Khurram Ishaque Dec 11 '19 at 07:55
  • Events are not normally bold in the list view (see the demos at https://fullcalendar.io/#demos). Since you seem to have a custom theme in your calendar (or at least some custom CSS) in use, then you probably need to change that theme or CSS code. – ADyson Dec 11 '19 at 09:43
  • I added changes in the .fc-title class but it updates both the time and the event name. But I want the time to be bold and event name to be normal – Haris George Dec 13 '19 at 07:08

0 Answers0