Angular-calendar: Wrap Event Title vertically for week view

[PrasannaKolla]

Is there any way that I can wrap my titles vertically in week view and horizontally in day view.

I have my title lengthy and its getting truncated for week view and day view. Attached the screenshots

I am using angular 5

[mattlewis92]

Unfortunately there's no trivial way to do this, there are tooltips that the user can mouse over to see the full title though. You might be able to get something working by using a custom template and some additional styling for the week view event component.

[tgoode]

This comes two years late, but if anyone else has this issue I achieved event title word wraps (where vertical space is available) using the CalendarEvent _cssClass_ property based on Matt's demo here.

calendar.component.ts

Define a custom class by adding your own css class name to the event's _cssClass_ property.

events: CalendarEvent[] = [
    {
      title: 'Has custom class',
      color: colors.yellow,
      start: new Date(),
      cssClass: 'my-custom-class',
    },
  ];

styles.css

Add the css class to your global _styles.css_ file with the following style change.

.my-custom-class span{
    white-space: normal !important;
}

[igoragueme]

This comes two years late, but if anyone else has this issue I achieved event title word wraps (where vertical space is available) using the CalendarEvent _cssClass_ property based on Matt's demo here.

calendar.component.ts

Define a custom class by adding your own css class name to the event's _cssClass_ property.

events: CalendarEvent[] = [
    {
      title: 'Has custom class',
      color: colors.yellow,
      start: new Date(),
      cssClass: 'my-custom-class',
    },
  ];

styles.css

Add the css class to your global _styles.css_ file with the following style change.

.my-custom-class span{
    white-space: normal !important;
}

I think it would be a good idea to have an example of this solution in the documentation..

[Tahir-zaman]

please help me how design this type of calender