Event Calendar Customization request

Thank you so much Max! It is a great support and useful suggestion!

Could you please also suggest the code that I can hide the event start & end time on the calendar mobile view, plus height adjustment of the
colourful highlight of the event name?

Thank you so much!
Screenshot 2023-03-23 at 8.39.35 AM

Hello @Dorothy1! Happy to hear that you are good now!

Sure thing, I’ve added CSS codes to the Custom CSS field:

  1. To hide start and end time of the events on mobile:
 .fc-event-time {
      font-size: 8px !important;
      display: none!important;
    }
  1. To increase the event height:
.fc-daygrid-block-event {
  height: 90px;
}

Please check it and let me know if you like what you see.

Thank you Max!!

Is it possible to hide the time for just particular event? Or I should say. we have a problem on arranging the sequence in the calendar, as knowing that it is auto-arranged by the event start time. But there is some event that we want to highlight and put at the first position for that date. Could you please help? Thank you agian!

1 Like

@Dorothy1 Our devs will try to make a custom script for you! Could you please specify the events where you’d like the time to be hidden?

1 Like

Thank you Max! Is the code reusable for my other events?

We need to:

  1. Edit the event name showing in different colours by event type. E.g from my Calendar there is a category called Food & Beverage, we would like to change the event name under this category in Green.

Secondly we would like to hide the event start time and end time for event “Hong Kong Seven”, thank you!

1 Like

Further, we would like to explore the possibility to control the event title showing on the calendar by changing different colours / style (Bold / italic) instead of highlight colour to classify different event types. thanks.

1 Like

@Dorothy1 I’ll discuss with our devs whether the script can be applied to another events.

As for the editing, the event name showing in different colours by event type. I’ve checked Food & Beverage category and the events are already in green:

I guess I could misunderstand you. Could you please send me a screenshot of what exactly you’d like to be green?

As for your last question, would you like to change the color/style of the event title for all events or for certain ones?

Hi Max,
Sorry for my unclear request. Here is the mockup showing the change of colour of event name. Yes I want to change the color/style of the event title for certain ones. Thank you!
image

1 Like

@Dorothy1 Here is the CSS code to move Honk Kong Sevens event to the bottom:

.fc-daygrid-day[data-date="2023-04-01"] 
.fc-daygrid-day-events {
	display: flex;
	flex-direction: column;
}

.fc-daygrid-day[data-date="2023-04-01"] 
.fc-daygrid-day-events
.fc-daygrid-event-harness:nth-child(2) {
	order: 1;
}

To apply this code to the other events, you need to change the date and the number of event after nth-child.

Please check it and let me know if it helped :slightly_smiling_face:

As for the color changing for the event name, do I understand correctly that you’d like to apply green color to the all Hong Kong Sevens events, but not only to the event on April,1?

1 Like

Hi Max, thank you so much! the code for rearranging the event sequence works!

Yes, the colour changing for event title is for specific event only, not all events on April 1.

1 Like

Happy to hear that this code worked for you!

As for the color changing, I guess I wasn’t clear enough.

You have several Hong Kong Sevens events (March 31, April 1,2). Would you like to change color only for Hong Kong Sevens event on April 1 or for all Hong Kong Sevens events?

1 Like

Hi!
Say just change the colour for HK sevens on 1 April only

1 Like

Please add this CSS code to the Custom CSS field and let me know if it helped :slightly_smiling_face:

.fc-daygrid-day[data-date="2023-04-01"] 
.fc-daygrid-day-events
.fc-daygrid-event-harness:nth-child(2)
.fc-event-title {
  font-weight: bold;
  font-style: italic;
  color: green;
}

Hello Max! So happy that you have helped a lot on the classic calendar layout! Thank you so much!

At the end, we have decided to use the Grid layout. I found it can show events up to 1 month only, is there any setting that I can change to show more months? Thank you!

1 Like

Hi @Dorothy1 :wave:

Happy to hear that you are good now!

At the moment, there is no option to display events beyond the month, but we are working on it and this feature is going to be released in a couple of weeks.

Check all the updates here :wink:

2 Likes

Thank you Max!!

Btw I have accidentally clicked on the upgrade button for all app access without confirmation :sweat_smile: is there way to refund and recover my acc to event calendar pro with 10 widgets? I have 3 widgets left only now…

1 Like

@Dorothy1 I see that my colleague Nataliya has already contacted you and switched your subscription back.

If any other question come up, please contact Nataliya. She’ll be happy to help!