Mobile display for Monthly schedule style

I love your Event Calendar, unfortunately the display is not ideal for mobile view. Only the first letter of the event name can be displayed, and the calendar is a bit long to read if there are several events on a day. May I know is there any suggestion on CSS code / setting that I may adjust to improve the mobile view layout of my calendar?

Thank you so much for help!

1 Like

Hi @Dorothy1! Happy to see you here! Welcome to Community :tada:

Your idea is awesome and I bet this option added to the editor would be really useful for many users. We’ll try to consider your suggestion in our future updates!

Thank you for sharing this idea :heart:

As for now, unfortunately, it’s impossible to change the calendar length on mobile. I am so sorry!

To decrease the size of the event name, add this CSS code to the Custom CSS field on the Appearance tab and let me know if it helped:

@media screen and (max-width: 480px) {
    .fc-event-title {
      height: 22px;
      font-size: 8px !important;
      word-break: break-all;
      padding: 0;
    }
    
    .fc-event-time {
      font-size: 8px !important;
    }
    
    .fc-daygrid-event {
      white-space: normal;
    }
}

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

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!

The mobile view for Calendar view is not asthetically pleasing. You can only see the first or second letter of each event so you have to click on it to see what it is. I like the view on our webpage for computer or tablet use, but most people use their phones and don’t like the way that looks. Any suggestions?

1 Like