How to customize Schedule's default theme using SCSS file?

1 min read

This article explains how to customize the schedule’s default theme using an SCSS file.

Step 1: Generate and download the theme file from Theme Studio.

Step 2: Create an Angular project with the Scheduler control. Kindly check the link below to create a project with the Scheduler.

Step 3: Move the downloaded file to this project.

Step 4: Rename the styles.css file into styles.scss

Step 5: Replace the below line in the styles.scss file. And in this file, we can customize the schedule’s theme variables as shown below,

$schedule-appointment-bg-color: green;
@import './assets/material.scss';

Step 5: Run the application, and the schedule will be rendered with the appointment's color as green.

Did you find this information helpful?

Yes

Comments (0)