Scheduler styling

[Abdulaziz Ba Haj]

Hello,

I have been looking for the styling documentation for a few days now, trying to make it as the picture below.

The design basically the green cercle is the current date, and the yellow cercle indicate that the day has events.

I have managed to change the color of the current date, but I couldn't do the rest.

My first question is how to check if the day has events, so then I can change the color of that day to yellow,

And my second question is how can I make the cell header text (15, 16... etc) centered and bigger,

Lastly, how to abbreviate the month (February to FEB .. and so on) .

Thank you.

[Ruksar Moosa Sait]

Hi Abdulaziz,

Q1. How to check if the day has events

You can get the appointment availability based on the date by sending start and end date range to the the getEvents method of the Schedule.

Q2.How can I make the cell header text (15, 16... etc) centered and bigger

Q3. How to abbreviate the month (February to FEB .. and so on)

Could you please get back to us with the below additional details that would help us to provide the solution earlier?

• Are you using individual calendar component out side of the Schedule?
• Which Schedule view are you using in your project to customize?
• Share us the UG link referred to customize the cells.

If you are using the Year view of the Schedule you can refer the below UG link for more details on scheduler styling and appearance.

https://ej2.syncfusion.com/angular/documentation/schedule/scheduler-styling/

Regards,

Ruksar Moosa Sait

[Abdulaziz Ba Haj]

Hello Ruksar,

Could you please get back to us with the below additional details that would help us to provide the solution earlier?

• Are you using individual calendar component out side of the Schedule?

No i am only using <ejs-schedule>, i am just trying to use a simple scheduler, but i have been struggling with the styling.

• Which Schedule view are you using in your project to customize?

Only the month view

• Share us the UG link referred to customize the cells.

[Ruksar Moosa Sait]

Hi Abdulaziz,

You can achieve your shared layout in the Year view of the Schedule and for the same, we have prepared the sample for your reference.

Q1.How can I make the cell header text (15, 16... etc) centered and bigger

You can make the cell header text look bigger by using the below CSS class

.e-schedule .e-year-view .e-calendar-wrapper .e-month-calendar.e-calendar .e-content span.e-day{

    font-size: 16px !important;

  }

Q2. How to abbreviate the month (February to FEB .. and so on)

You can slice the innerText to abbreviate the month names using the renderCell method like the below code

public
renderCell(args: RenderCellEventArgs): void {

    if (args.elementType === 'headerCells') {

      args.element.innerHTML = args.element.innerHTML.slice(0, 3);

    }

  }

Sample: https://stackblitz.com/edit/angular-fvaztj-2rkd7z?file=app.component.ts

Output:

Kindly try the above sample and let us know if this meets your requirement.

Regards,

Ruksar Moosa Sait