--- title: "Angular Scheduler CSS Classes for Cell Colors and Blocked Times Example | Mobiscroll" component: "Scheduler" framework: "Angular" library_version: "6.1.5" url: "https://demo.mobiscroll.com/angular/scheduler/colors-invalids-css-class" --- # CSS Classes for Cell Colors and Blocked Times - Angular Scheduler demo Apply custom CSS classes to color-code Angular Scheduler cells and style blocked times - add patterns or backgrounds for days or periods. - [Live demo](https://demo.mobiscroll.com/angular/scheduler/colors-invalids-css-class) - [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/eventcalendar/scheduler/colors-invalids-css-class) - This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/scheduler/colors-invalids-css-class.md), [jQuery](https://demo.mobiscroll.com/jquery/scheduler/colors-invalids-css-class.md), [React](https://demo.mobiscroll.com/react/scheduler/colors-invalids-css-class.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/colors-invalids-css-class.md) ## Description Besides [customizing the background color](https://demo.mobiscroll.com/angular/scheduler/colored-cell-background) of cells and [setting up invalid/blocked out times](https://demo.mobiscroll.com/angular/scheduler/time-off-blocked-ranges) you can customize how these blocks and disabled times look by passing a `cssClass` to the [`colors`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-colors) and [`invalid`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-invalid) array elements. The output could be a custom pattern, custom styling for the labels or anything that you'd like to render as the background. This a great way for adding special meaning to certain days and time ranges. ## What this demo shows - A desktop weekly scheduler from Monday to Friday, with a fixed week strip at the top, a fixed all-day row below it, and a scrollable scheduler time grid for the selected week. - **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between weeks and jump back to the current day. - **Week strip**: The fixed strip below the header displays days from Monday to Friday in the selected week, with the current date highlighted by a blue circle. - **Time grid** The scheduler grid scrolls vertically through the hours of the selected week. - **Colored time ranges** Predefined customized backgrounds mark specific time grid cells without blocking event labels where the colors option is customized with css. - **Lunch marker** Weekdays from Monday to Friday show a grey and white background from 12 PM to 1 PM, with a Lunch break title in the center of the marked cell and these time periods are disabled so the invalid option is customized with css. - **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title. - **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts. - **Current time** A blue current-time line appears across the time grid, with a small blue dot marking the current date. - **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments. - **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration. - **Event selection** Clicking an event selects and highlights it. - **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event. ## Best for - **Recurring marked hours** Highlighting repeated time ranges such as lunch breaks, maintenance windows, or blocked working hours in a weekly scheduler. - **Special dates and observances** Marking public holidays, company observances, or other notable dates directly in the scheduler background. - **Scheduler overview screens** Adding background cues that help people scan important hours while keeping event cards visible and readable. - **Availability context** Showing non-event time markers alongside scheduled events without turning those markers into regular event cards. ## API used in this demo - [`theme`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-theme) - option - [`themeVariant`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-themeVariant) - option - [`clickToCreate`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-clickToCreate) - option - [`dragToCreate`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToCreate) - option - [`dragToMove`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToMove) - option - [`dragToResize`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToResize) - option - [`eventDelete`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-eventDelete) - option - [`view`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) - option - [`invalid`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-invalid) - option - [`cssClass`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-cssClass) - option - [`colors`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-colors) - option - [`data`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-data) - option ## Code ### Component ```ts import { CommonModule } from '@angular/common'; import { HttpClient } from '@angular/common/http'; import { Component, OnInit } from '@angular/core'; import { MbscCalendarEvent, MbscEventcalendarOptions, MbscModule, setOptions } from '@mobiscroll/angular'; setOptions({ theme: 'ios', themeVariant: 'light' }); @Component({ selector: 'app-root', templateUrl: './app.component.html', standalone: true, imports: [CommonModule, MbscModule], }) export class AppComponent implements OnInit { constructor(private http: HttpClient) {} myEvents: MbscCalendarEvent[] = []; calendarSettings: MbscEventcalendarOptions = { clickToCreate: true, dragToCreate: true, dragToMove: true, dragToResize: true, eventDelete: true, view: { scheduler: { allDay: false, type: 'week', startDay: 1, endDay: 5, }, }, invalid: [ { start: '12:00', end: '13:00', title: 'Lunch break', recurring: { repeat: 'weekly', weekDays: 'MO,TU,WE,TH,FR', }, cssClass: 'md-lunch-break-class mbsc-flex', }, ], colors: [ { start: '03:00', end: '10:00', recurring: { repeat: 'weekly', weekDays: 'MO', }, cssClass: 'md-rect-bg', }, { start: '16:00', end: '22:00', recurring: { repeat: 'weekly', weekDays: 'TH', }, cssClass: 'md-rect-bg', }, { start: '15:00', end: '21:00', recurring: { repeat: 'weekly', weekDays: 'MO', }, cssClass: 'md-stripes-bg', }, { start: '04:00', end: '10:00', recurring: { repeat: 'weekly', weekDays: 'FR', }, cssClass: 'md-stripes-bg', }, { start: '02:00', end: '09:00', recurring: { repeat: 'weekly', weekDays: 'TU', }, cssClass: 'md-dots-bg', }, { start: '14:00', end: '20:00', recurring: { repeat: 'weekly', weekDays: 'WE', }, cssClass: 'md-dots-bg', }, ], }; ngOnInit(): void { this.http.jsonp('https://trial.mobiscroll.com/workday-events/', 'callback').subscribe((resp) => { this.myEvents = resp; }); } } ``` ### Template ```html ``` ### CSS ```css .md-lunch-break-class.mbsc-schedule-invalid { justify-content: center; align-items: center; font-weight: bold; background: repeating-linear-gradient(-45deg, #f3f3f3, #f3f3f3 10px, #e5e5e5 10px, #e5e5e5 20px); } .md-stripes-bg { background: repeating-linear-gradient(-45deg, #fcfffc, #fcfffc 10px, #eefbec 10px, #eefbec 20px); } .md-dots-bg { background-image: radial-gradient(#a7a7a7 20%, transparent 20%); background-color: #f9f9f9; background-position: 0 0, 10px 10px; background-size: 20px 20px; } .md-rect-bg { opacity: 0.8; background-image: repeating-linear-gradient(45deg, #ffd6d6 25%, transparent 25%, transparent 75%, #ffd6d6 75%, #ffd6d6), repeating-linear-gradient(45deg, #ffd6d6 25%, #ffefef 25%, #ffefef 75%, #ffd6d6 75%, #ffd6d6); background-position: 0 0, 10px 10px; background-size: 20px 20px; } ``` ## Implementation notes - Use `view: { scheduler: { type: 'week', startDay: 1, endDay: 5, allDay: false } }` - a Mon-Fri work week with no all-day row. - Load events from `https://trial.mobiscroll.com/workday-events/` via JSONP using `getJson(url, callback, 'jsonp')`. React/Angular/Vue: assign the fetched array to the state/property bound to the `data` prop. JS/jQuery (imperative API): call `inst.setEvents(events)` in the callback. - **Invalid block** - pass one entry to the `invalid` array: 12:00-13:00 recurring on weekdays (`weekDays: 'MO,TU,WE,TH,FR'`), with `title: 'Lunch break'` and a `cssClass` for custom styling. This blocks the lunch slot with a custom visual pattern. - **Color overlays** - pass entries to the `colors` array, each targeting a specific time range recurring on a weekday. Assign a `cssClass` to each entry to apply a custom CSS pattern (stripes, dots, checkerboard). The `cssClass` on a `colors` entry works the same way as on `invalid` entries - Mobiscroll applies it to the colored block element so the class can define any background pattern via CSS. ## Run it in your project 1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial). 2. Clone the repository: ``` git clone https://github.com/acidb/mobiscroll-demos-angular.git ``` 3. If not installed yet, install the Mobiscroll CLI from NPM: ``` npm install -g @mobiscroll/cli ``` 4. Config Mobiscroll - open a terminal window in the root directory and run: ``` mobiscroll config angular ``` 5. Install dependencies - open a terminal window in the root directory and run: ``` npm install ``` 6. Run the project: ``` ng serve ``` On a trial, add `--trial` to the config command: `mobiscroll config angular --trial`. Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/angular/getting-started/installation ## Related demos - Next: [Resource Filtering in Header](https://demo.mobiscroll.com/angular/scheduler/resource-filtering-in-header.md) - Add a segmented resource filter to the Angular Scheduler header — place it between navigation buttons to let users switch resources inline.