How to create a Booking calendar screen

Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with a range of pre-made elements. Designers can effortlessly pick and place elements, eliminating the need to create components from scratch. For developers, this means no complex coding – all components are sourced from the Ionic Framework. The result is a speedy, efficient, and collaborative process, making the Ionic Design Kit essential for both designers and developers.

The Booking Calendar Screen is a vital feature in appointment, event, and service-based apps, allowing users to select available dates and times for bookings. A well-designed calendar interface provides clear availability indicators, time slot selection, and easy navigation between days or months. Optional features like booking confirmation, reminders, and integration with user calendars can further enhance convenience and reliability.

This guide will walk you through the steps to design and implement a Booking Calendar Screen using the Ionic Design Kit. By leveraging its versatile UI components and the Ionic Framework, you can create a responsive, intuitive, and visually organized booking interface that streamlines the scheduling experience for users.

1. Install Ionic CLI with the command

Creating a project with the Ionic CLI

npm i -g @ionic/cli

2. Create a new project

To create a new project, run the following command.

ionic start booking-calendar blank --type=react

3. Get inside the project directory

cd booking-calendar

4. Create a Booking calendar page

Create page BookingCalendar.tsx inside src/pages and add code.

import { IonPage } from '@ionic/react';

const BookingCalendar: React.FC = () => {
  return (
    <IonPage></IonPage>
  );
};

export default BookingCalendar;

Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.

5. Select the layout structure

For convenience, we will be using the layout structure recommended by Ionic for all screens. This allows us to add header code and content inside the IonPage.

<IonPage>
  <IonHeader>
    <IonToolbar>
    ...
    </IonToolbar>
  </IonHeader>
  <IonContent>
  ...
  </IonContent>
</IonPage>

6. Initialize state

Define component state using useState. showModal controls whether the modal is open, and selectedTab tracks the active segment button. datesValue is a predefined list of selected dates.

const BookingCalendar: React.FC = () => {
  const [showModal, setShowModal] = useState(true);
  const [selectedTab, setSelectedTab] = useState<string | number>("");
  const datesValue = [
    "2025-10-13",
    "2025-10-14",
    "2025-10-15",
    "2025-10-16",
    "2025-10-17",
  ];
...
}

7. Set up page and header structure

Wrap the UI in IonPage to define a full Ionic page. IonHeader contains IonToolbar with IonTitle for the logo text. IonButtons with slot="end" places action buttons on the right, each IonButton holding an IonIcon.

<IonPage>
    <IonHeader>
        <IonToolbar>
            <IonTitle>Logotype</IonTitle>
            <IonButtons slot="end" className="ion-padding-end">
                <IonButton>
                    <IonIcon icon={chatbubbleOutline} />
                </IonButton>
                <IonButton>
                    <IonIcon icon={notificationsOutline} />
                </IonButton>
            </IonButtons>
        </IonToolbar>
    </IonHeader>
</IonPage>

This concludes our work with IonHeader, and the following sections will cover working with IonContent.

8. Add main content and segments

Use IonContent for scrollable content. IonSegment switches between travel categories and has value to bind the current tab. The onIonChange handler updates the state and opens the modal if stays is selected. IonSegmentButton sets each option with its value.

<IonContent className="ion-padding">
    ...
    <IonSegment
        value={selectedTab}
        onIonChange={(e) => {
            const val = e.detail.value!;
            setSelectedTab(val);
            if (val === "stays") {
                setShowModal(true);
            }
        }}
    >
        <IonSegmentButton value="stays">Stays</IonSegmentButton>
        <IonSegmentButton value="flights">Flights</IonSegmentButton>
        <IonSegmentButton value="car-rental">Car rental</IonSegmentButton>
        <IonSegmentButton value="taxi">Taxi</IonSegmentButton>
    </IonSegment>
</IonContent>

IonModal creates a sliding panel. isOpen controls visibility, breakpoints sets height options, initialBreakpoint sets the starting height, and handleBehavior="cycle" allows cycling through breakpoints.

<IonContent>
    ...
    <IonModal
        isOpen={showModal}
        breakpoints={[0, 0.89, 1]}
        initialBreakpoint={0.89}
        handleBehavior="cycle"
    ></IonModal>
</IonContent>

Inside the modal, IonToolbar with custom padding displays a IonTitle and a close button in IonButtons aligned to the right using slot="end". The close button calls setShowModal(false).

<IonContent>
    ...
    <IonToolbar style={{ paddingTop: "8px", paddingBottom: "6px" }}>
        <IonTitle>Select dates</IonTitle>
        <IonButtons slot="end">
            <IonButton onClick={() => setShowModal(false)}>Close</IonButton>
        </IonButtons>
    </IonToolbar>
</IonContent>

An IonSegment inside IonContent allows switching between 'Calendar' and 'I’m flexible' modes. Inline style sets the top margin. <br /> adds spacing.

<IonContent>
    ...
    <IonSegment value="calendar" style={{ marginTop: "8px" }}>
        <IonSegmentButton value="calendar">Calendar</IonSegmentButton>
        <IonSegmentButton value="flex">I'm flexible</IonSegmentButton>
    </IonSegment>
    <br />
</IonContent>

12. Add date picker

IonDatetime displays a date picker. The presentation="date" sets date mode, multiple={true} allows multiple selections, size="cover" controls display size, locale sets language, and value preloads selected dates.

<IonContent>
    ...
    <IonDatetime
        presentation="date"
        multiple={true}
        size="cover"
        locale="en-En"
        value={datesValue}
    ></IonDatetime>
</IonContent>

13. Add date range chips

IonChip components represent date flexibility options. The color="primary" gives them a themed color, and outline={true} displays them as outlined rather than filled.

<IonContent>
    ...
    <br />
    <IonChip color="primary">Exact dates</IonChip>
    <IonChip color="primary" outline={true}>
        ± 1 day
    </IonChip>
    <IonChip color="primary" outline={true}>
        ± 2 days
    </IonChip>
    <IonChip color="primary" outline={true}>
        ± 3 days
    </IonChip>
</IonContent>

14. Summarize and add actions

A <p> tag with Ionic utility classes centers and spaces the selected date range text. Two IonButton elements allow confirming date selection or clearing it. The expand="block" makes them full-width, and fill="clear" creates a transparent style.

<IonContent>
    ...
    <p className="ion-text-center ion-margin-top">
        Mon 13 - Fri 17 Oct (4 nights)
    </p>
    <IonButton expand="block">Select Dates</IonButton>
    <IonButton expand="block" fill="clear">
        Clear
    </IonButton>
</IonContent>

Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.

Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!