# Search & Discovery / Time Slot Selection Weekly calendar view for selecting available consultation time slots with visual availability indicators. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-time-slot-selection--full-screen ## Pattern variants - Full Screen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-time-slot-selection--full-screen - Column: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-time-slot-selection--column - Card: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-time-slot-selection--card ## When to use this pattern Use Search & Discovery / Time Slot Selection when building citizen-facing flows that match the described government journey. Combine components such as cards, forms, tables, buttons, and status indicators as shown in Storybook. ## 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 Search & Discovery / Time Slot Selection. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Card — Time Slot Selection - Full Page HTML: ```html

Select appointment time with Adv. M. Sharma

Choose a date and 30-minute slot. Your booking is not reserved until confirmed.

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

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 SearchDiscoveryTimeSlotSelectionExample1Demo = () => ( <>

{/* Breadcrumbs */}

{/* Header */}

Select appointment time with Adv. M. Sharma

Choose a date and 30-minute slot. Your booking is not reserved until confirmed.

{/* Weekly Slots Container */}

{/* 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

{/* 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 SearchDiscoveryTimeSlotSelectionExample1Demo; ``` Angular: ```html

Select appointment time with Adv. M. Sharma

Choose a date and 30-minute slot. Your booking is not reserved until confirmed.

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

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

``` ### 2. Column — Time Slot Selection - Full Page HTML: ```html

Select appointment time with Adv. M. Sharma

Choose a date and 30-minute slot. Your booking is not reserved until confirmed.

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

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 SearchDiscoveryTimeSlotSelectionExample2Demo = () => ( <>

{/* Breadcrumbs */}

{/* Header */}

Select appointment time with Adv. M. Sharma

Choose a date and 30-minute slot. Your booking is not reserved until confirmed.

{/* Weekly Slots Container */}

{/* 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

{/* 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 SearchDiscoveryTimeSlotSelectionExample2Demo; ``` Angular: ```html

Select appointment time with Adv. M. Sharma

Choose a date and 30-minute slot. Your booking is not reserved until confirmed.

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

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

``` ### 3. Full Screen — Time Slot Selection - Full Page HTML: ```html

Select appointment time with Adv. M. Sharma

Choose a date and 30-minute slot. Your booking is not reserved until confirmed.

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

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 SearchDiscoveryTimeSlotSelectionExample3Demo = () => ( <>

{/* Breadcrumbs */}

{/* Header */}

Select appointment time with Adv. M. Sharma

Choose a date and 30-minute slot. Your booking is not reserved until confirmed.

{/* Weekly Slots Container */}

{/* 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

{/* 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 SearchDiscoveryTimeSlotSelectionExample3Demo; ``` Angular: ```html

Select appointment time with Adv. M. Sharma

Choose a date and 30-minute slot. Your booking is not reserved until confirmed.

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

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

```