# Time Slot A Time Slot represents a specific period available for scheduling, booking, or appointments. It helps users select a convenient date and time, ensuring organized planning and efficient allocation of resources. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-time-slot--introduction ## Variants documented in Storybook - Weekly Expanded: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-time-slot--weekly-expanded - Compact: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-time-slot--compact ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Time Slot. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Compact — Compact Time Slot HTML: ```html
May 2026
Mo
Tu
We
Th
Fr
Sa
Su
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
No slots
Public holiday
Weekly off
23rd April 2026
9:00 AM 6
9:30 AM 7
10:00 AM 1
10:30 AM 9
11:00 AM 0
11:30 AM 2
12:00 PM 2
12:30 PM 3
1:00 PM 0
1:30 PM 7
2:00 PM 3
2:30 PM 2
``` React: ```jsx import React from 'react'; const TimeSlotExample1Demo = () => ( <>
{/* Left Pane: Calendar */}
May 2026
Mo
Tu
We
Th
Fr
Sa
Su
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
No slots
Public holiday
Weekly off
{/* Right Pane: Slots */}
23rd April 2026
9:00 AM 6
9:30 AM 7
10:00 AM 1
10:30 AM 9
11:00 AM 0
11:30 AM 2
12:00 PM 2
12:30 PM 3
1:00 PM 0
1:30 PM 7
2:00 PM 3
2:30 PM 2
); export default TimeSlotExample1Demo; ``` Angular: ```html
May 2026
Mo
Tu
We
Th
Fr
Sa
Su
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
No slots
Public holiday
Weekly off
23rd April 2026
9:00 AM 6
9:30 AM 7
10:00 AM 1
10:30 AM 9
11:00 AM 0
11:30 AM 2
12:00 PM 2
12:30 PM 3
1:00 PM 0
1:30 PM 7
2:00 PM 3
2:30 PM 2
``` ### 2. Introduction — Introduction HTML: ```html
Components

Time Slot

A Time Slot represents a specific period available for scheduling, booking, or appointments. It helps users select a convenient date and time, ensuring organized planning and efficient allocation of resources.

Implementation Showcase

Visual demonstration of Time Slot variations.

Time Slot / Weekly Expanded

Mon 14 Apr Today
Mon14 Apr
Tue15 Apr
Wed16 Apr
Thu17 Apr
Fri18 Apr
Sat19 Apr
Sun20 Apr
9:00 AM
9:30 AM
10:00 AM
10:30 AM
11:00 AM
Public Holiday Gandhi Jayanti
Weekly off
Weekly off
11:30 AM
12:00 PM
12:30 PM
1:00 PM
1:30 PM
Available
check_circle Selected
No slots
Limited slots
Public holiday
Weekly off

Time Slot / Compact

May 2026
Mo
Tu
We
Th
Fr
Sa
Su
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
No slots
Public holiday
Weekly off
23rd April 2026
9:00 AM6
9:30 AM7
10:00 AM1
10:30 AM9
11:00 AM0
11:30 AM2
12:00 PM2
12:30 PM3
1:00 PM0
1:30 PM7
2:00 PM3
2:30 PM2

CSS Class Reference

Quickly copy layout and utility classes for Time Slot interfaces.

Weekly Expanded Classes

Main Weekly Container ux4g-time-slot-weekly-container
Schedule Grid Area ux4g-time-slot-weekly-grid
Day Column Header ux4g-time-slot-day-header
Time Slot Item/Cell ux4g-time-slot-cell
Legend Container ux4g-time-slot-weekly-legend
Mobile Nav Container ux4g-time-slot-mobile-nav

Compact & State Utilities

Main Compact Container ux4g-time-slot-compact-container
Compact Left Pane ux4g-time-slot-compact-calendar
Compact Right Pane ux4g-time-slot-compact-slots
Compact Time Slot Item ux4g-time-slot-compact-slot-item
Available Slot State available
Holiday State holiday
Weekly Off State weekly-off
``` React: ```jsx import React from 'react'; const TimeSlotExample2Demo = () => ( <>
Components

Time Slot

A Time Slot represents a specific period available for scheduling, booking, or appointments. It helps users select a convenient date and time, ensuring organized planning and efficient allocation of resources.

Implementation Showcase

Visual demonstration of Time Slot variations.

Time Slot / Weekly Expanded

{/* Mobile Navigation Header (Hidden on Desktop) */}
Mon 14 Apr Today
{/* Headers */}
Mon 14 Apr
Tue 15 Apr
Wed 16 Apr
Thu 17 Apr
Fri 18 Apr
Sat 19 Apr
Sun 20 Apr
{/* 9:00 AM */}
9:00 AM
{/* 9:30 AM */}
9:30 AM
{/* 10:00 AM */}
10:00 AM
{/* 10:30 AM */}
10:30 AM
{/* 11:00 AM */}
11:00 AM
Public Holiday Gandhi Jayanti
Weekly off
Weekly off
{/* 11:30 AM */}
11:30 AM
{/* 12:00 PM */}
12:00 PM
{/* 12:30 PM */}
12:30 PM
{/* 1:00 PM */}
1:00 PM
{/* 1:30 PM */}
1:30 PM
Available
check_circle defaultSelected
No slots
Limited slots
Public holiday
Weekly off

Time Slot / Compact

{/* Left Pane: Calendar */}
May 2026
Mo
Tu
We
Th
Fr
Sa
Su
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
No slots
Public holiday
Weekly off
{/* Right Pane: Slots */}
23rd April 2026
9:00 AM 6
9:30 AM 7
10:00 AM 1
10:30 AM 9
11:00 AM 0
11:30 AM 2
12:00 PM 2
12:30 PM 3
1:00 PM 0
1:30 PM 7
2:00 PM 3
2:30 PM 2

CSS Class Reference

Quickly copy layout and utility classes for Time Slot interfaces.

{/* Weekly Expanded Classes */}

Weekly Expanded Classes

Main Weekly Container ux4g-time-slot-weekly-container
Schedule Grid Area ux4g-time-slot-weekly-grid
Day Column Header ux4g-time-slot-day-header
Time Slot Item/Cell ux4g-time-slot-cell
Legend Container ux4g-time-slot-weekly-legend
Mobile Nav Container ux4g-time-slot-mobile-nav
{/* Compact & State Utilities */}

Compact & State Utilities

Main Compact Container ux4g-time-slot-compact-container
Compact Left Pane ux4g-time-slot-compact-calendar
Compact Right Pane ux4g-time-slot-compact-slots
Compact Time Slot Item ux4g-time-slot-compact-slot-item
Available Slot State available
Holiday State holiday
Weekly Off State weekly-off
); export default TimeSlotExample2Demo; ``` Angular: ```html
Components

Time Slot

A Time Slot represents a specific period available for scheduling, booking, or appointments. It helps users select a convenient date and time, ensuring organized planning and efficient allocation of resources.

Implementation Showcase

Visual demonstration of Time Slot variations.

Time Slot / Weekly Expanded

Mon 14 Apr Today
Mon14 Apr
Tue15 Apr
Wed16 Apr
Thu17 Apr
Fri18 Apr
Sat19 Apr
Sun20 Apr
9:00 AM
9:30 AM
10:00 AM
10:30 AM
11:00 AM
Public Holiday Gandhi Jayanti
Weekly off
Weekly off
11:30 AM
12:00 PM
12:30 PM
1:00 PM
1:30 PM
Available
check_circle Selected
No slots
Limited slots
Public holiday
Weekly off

Time Slot / Compact

May 2026
Mo
Tu
We
Th
Fr
Sa
Su
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
No slots
Public holiday
Weekly off
23rd April 2026
9:00 AM6
9:30 AM7
10:00 AM1
10:30 AM9
11:00 AM0
11:30 AM2
12:00 PM2
12:30 PM3
1:00 PM0
1:30 PM7
2:00 PM3
2:30 PM2

CSS Class Reference

Quickly copy layout and utility classes for Time Slot interfaces.

Weekly Expanded Classes

Main Weekly Container ux4g-time-slot-weekly-container
Schedule Grid Area ux4g-time-slot-weekly-grid
Day Column Header ux4g-time-slot-day-header
Time Slot Item/Cell ux4g-time-slot-cell
Legend Container ux4g-time-slot-weekly-legend
Mobile Nav Container ux4g-time-slot-mobile-nav

Compact & State Utilities

Main Compact Container ux4g-time-slot-compact-container
Compact Left Pane ux4g-time-slot-compact-calendar
Compact Right Pane ux4g-time-slot-compact-slots
Compact Time Slot Item ux4g-time-slot-compact-slot-item
Available Slot State available
Holiday State holiday
Weekly Off State weekly-off
``` ### 3. Weekly Expanded — Weekly Expanded Time Slot HTML: ```html
Mon 14 Apr Today
Mon 14 Apr
Tue 15 Apr
Wed 16 Apr
Thu 17 Apr
Fri 18 Apr
Sat 19 Apr
Sun 20 Apr
9:00 AM
9:30 AM
10:00 AM
10:30 AM
11:00 AM
Public Holiday Gandhi Jayanti
Weekly off
Weekly off
11:30 AM
12:00 PM
12:30 PM
1:00 PM
1:30 PM
Available
check_circle Selected
No slots
Limited slots
Public holiday
Weekly off
``` React: ```jsx import React from 'react'; const TimeSlotExample3Demo = () => ( <>
{/* Mobile Navigation Header (Hidden on Desktop) */}
Mon 14 Apr Today
{/* Headers */}
Mon 14 Apr
Tue 15 Apr
Wed 16 Apr
Thu 17 Apr
Fri 18 Apr
Sat 19 Apr
Sun 20 Apr
{/* 9:00 AM */}
9:00 AM
{/* 9:30 AM */}
9:30 AM
{/* 10:00 AM */}
10:00 AM
{/* 10:30 AM */}
10:30 AM
{/* 11:00 AM */}
11:00 AM
Public Holiday Gandhi Jayanti
Weekly off
Weekly off
{/* 11:30 AM */}
11:30 AM
{/* 12:00 PM */}
12:00 PM
{/* 12:30 PM */}
12:30 PM
{/* 1:00 PM */}
1:00 PM
{/* 1:30 PM */}
1:30 PM
Available
check_circle defaultSelected
No slots
Limited slots
Public holiday
Weekly off
); export default TimeSlotExample3Demo; ``` Angular: ```html
Mon 14 Apr Today
Mon 14 Apr
Tue 15 Apr
Wed 16 Apr
Thu 17 Apr
Fri 18 Apr
Sat 19 Apr
Sun 20 Apr
9:00 AM
9:30 AM
10:00 AM
10:30 AM
11:00 AM
Public Holiday Gandhi Jayanti
Weekly off
Weekly off
11:30 AM
12:00 PM
12:30 PM
1:00 PM
1:30 PM
Available
check_circle Selected
No slots
Limited slots
Public holiday
Weekly off
``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.