# Search & Discovery / Reschedule Booking Request reschedule interface with calendar picker and reason for rescheduling. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-reschedule-booking--column ## Pattern variants - Column: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-reschedule-booking--column - FullScreen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-reschedule-booking--fullscreen - Card: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-reschedule-booking--card ## When to use this pattern Use Search & Discovery / Reschedule Booking 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 / Reschedule Booking. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Card — Reschedule Booking - Full Page HTML: ```html

Request reschedule

Original: Thu, 18 Apr 2026 · 11:00 – 11:30 AM with Adv. M. Sharma

Reason for reschedule

Select a new slot

April 2026
Mo
Tu
We
Th
Fr
Sa
Su
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
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 check_circle
1:00 PM 0
1:30 PM 7
2:00 PM 3
2:30 PM 2
``` React: ```jsx import React from 'react'; const SearchDiscoveryRescheduleBookingExample1Demo = () => ( <>
{/* Header */}

Request reschedule

Original: Thu, 18 Apr 2026 · 11:00 – 11:30 AM with Adv. M. Sharma

{/* Dropdown */}
Reason for reschedule
{/* Select a new slot title */}

Select a new slot

{/* Compact Calendar Component */}
{/* Left Pane: Calendar */}
April 2026
Mo
Tu
We
Th
Fr
Sa
Su
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
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 check_circle
1:00 PM 0
1:30 PM 7
2:00 PM 3
2:30 PM 2
{/* Page Footer Actions */}
); export default SearchDiscoveryRescheduleBookingExample1Demo; ``` Angular: ```html

Request reschedule

Original: Thu, 18 Apr 2026 · 11:00 – 11:30 AM with Adv. M. Sharma

Reason for reschedule

Select a new slot

April 2026
Mo
Tu
We
Th
Fr
Sa
Su
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
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 check_circle
1:00 PM 0
1:30 PM 7
2:00 PM 3
2:30 PM 2
``` ### 2. Column — Reschedule Booking - Full Page HTML: ```html

Request reschedule

Original: Thu, 18 Apr 2026 · 11:00 – 11:30 AM with Adv. M. Sharma

Reason for reschedule

Select a new slot

April 2026
Mo
Tu
We
Th
Fr
Sa
Su
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
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 check_circle
1:00 PM 0
1:30 PM 7
2:00 PM 3
2:30 PM 2
``` React: ```jsx import React from 'react'; const SearchDiscoveryRescheduleBookingExample2Demo = () => ( <>
{/* Header */}

Request reschedule

Original: Thu, 18 Apr 2026 · 11:00 – 11:30 AM with Adv. M. Sharma

{/* Dropdown */}
Reason for reschedule
{/* Select a new slot title */}

Select a new slot

{/* Compact Calendar Component */}
{/* Left Pane: Calendar */}
April 2026
Mo
Tu
We
Th
Fr
Sa
Su
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
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 check_circle
1:00 PM 0
1:30 PM 7
2:00 PM 3
2:30 PM 2
{/* Page Footer Actions */}
); export default SearchDiscoveryRescheduleBookingExample2Demo; ``` Angular: ```html

Request reschedule

Original: Thu, 18 Apr 2026 · 11:00 – 11:30 AM with Adv. M. Sharma

Reason for reschedule

Select a new slot

April 2026
Mo
Tu
We
Th
Fr
Sa
Su
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
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 check_circle
1:00 PM 0
1:30 PM 7
2:00 PM 3
2:30 PM 2
``` ### 3. Full Screen — Reschedule Booking - Full Page HTML: ```html

Request reschedule

Original: Thu, 18 Apr 2026 · 11:00 – 11:30 AM with Adv. M. Sharma

Reason for reschedule

Select a new slot

April 2026
Mo
Tu
We
Th
Fr
Sa
Su
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
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 check_circle
1:00 PM 0
1:30 PM 7
2:00 PM 3
2:30 PM 2
``` React: ```jsx import React from 'react'; const SearchDiscoveryRescheduleBookingExample3Demo = () => ( <>
{/* Header */}

Request reschedule

Original: Thu, 18 Apr 2026 · 11:00 – 11:30 AM with Adv. M. Sharma

{/* Dropdown */}
Reason for reschedule
{/* Select a new slot title */}

Select a new slot

{/* Compact Calendar Component */}
{/* Left Pane: Calendar */}
April 2026
Mo
Tu
We
Th
Fr
Sa
Su
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
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 check_circle
1:00 PM 0
1:30 PM 7
2:00 PM 3
2:30 PM 2
{/* Page Footer Actions */}
); export default SearchDiscoveryRescheduleBookingExample3Demo; ``` Angular: ```html

Request reschedule

Original: Thu, 18 Apr 2026 · 11:00 – 11:30 AM with Adv. M. Sharma

Reason for reschedule

Select a new slot

April 2026
Mo
Tu
We
Th
Fr
Sa
Su
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
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 check_circle
1:00 PM 0
1:30 PM 7
2:00 PM 3
2:30 PM 2
```