Custom Label Styling

You can customize the look of the labels and show additional content besides the event.title. There are two approaches you can take:

  • Only customize the content of the labels - For this you will want to use the renderCalendarEventContent option. The color and positioning of the label will be handled by the calendar. The title and any other custom fields you want to show inside the label is your responsibility.
  • Fully customize how the labels look (like in this example) - Use the renderCalendarEvent option. All original event fields along with computed fields like isMultiDay, lastDay can be leveraged for constructing the render function. With the renderCalendarEvent you will have full control over how the labels are styled including things like color, title and any custom fields.
Download and try example

Demo

Loading the live demo

Preview in full screen

Fully customize event labels in the event calendar — set colors, show timed-event dots, and include custom fields beyond the event title.

Code

View code on GitHub 
var inst = mobiscroll.eventcalendar('#demo-mobile-month-view', {
  locale:  ,
  theme: ' ',
  themeVariant: ' ',
  clickToCreate:  ,
  dragToCreate:  ,
  dragToMove:  ,
  dragToResize:  ,
  eventDelete:  ,
  view: {
    calendar: { labels: true },
  },
  renderCalendarEvent: function (data) {
    if (data.isMultiDay) {
      return '<div style="background:' + data.original.color + ';color:#000" class="multi-day-event">' + data.original.title + '</div>';
    } else {
      return (
        '<div class="single-day-event-dot" style="background:' +
        data.original.color +
        '"></div>' +
        '<div class="single-day-event">' +
        data.original.title +
        '</div>'
      );
    }
  },
  onEventClick: function (args) {
    mobiscroll.toast({
      message: args.event.title,
    });
  },
});

mobiscroll.getJson(
  'https://trial.mobiscroll.com/events/?vers=5',
  function (events) {
    inst.setEvents(events);
  },
  'jsonp',
);

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.