Calendar
Calendar Component: Used to showcase specific dates or facilitate date selection scenarios. Examples include displaying holidays or choosing check-in/check-out dates.
Last updated
Calendar Component: Used to showcase specific dates or facilitate date selection scenarios. Examples include displaying holidays or choosing check-in/check-out dates.
Last updated
Calendar is a crucial component in apps that involves management, booking system and event planning. You'll learn the usage of calendar component, including scenarios, design and configurations.
Schedule Management: In personal and enterprise management software, calendars are used to schedule and track meetings, tasks, and events. Users can view upcoming events and deadlines through the calendar.
Appointment and Booking Systems: In appointment systems within industries such as healthcare, beauty, and dining, calendars are used to schedule customer appointments. This helps in managing customer visit times and resource allocation.
Holiday and Special Event Marking: Many applications use calendars to mark public holidays, cultural events, or personal significant days (such as birthdays, anniversaries, etc.).
These are just some scenarios of calendar applications; in reality, calendars play a crucial role in almost any field that requires time management and event planning.
Dark Mode: By default, it is turned off. When activated, the background color of the calendar changes to black, and the date is displayed in white.
Display Today: By default, it is turned on. The calendar will display the current month and date.
Selected Date: It supports data binding only and is optional.
Tips:
When the selected date is not in the format of date/timestamp type, the calendar will not display the selected date.
The calendar component is not an input-type component. If you want to retrieve the selected date through the calendar component, you need to combine the interactive operations of the calendar component with the page data. Assign the selected result to the page data, and then reference the page data when adding or modifying data. Refer to the calendar component operation example below for guidance.
Click date event: the behavior that is executed when you click on a date in the calendar.
Example of operation: Retrieve the clicked date.
Set the page data "day" type as the date.
Drag the calendar component into the page, then in the component's interaction, under the "On data clicked actions," configure the action to "Set Page Data" with the value being the clicked date from the result data. At this point, you need to click on this value to choose the display format for the selected date result, such as "Date": 2023/12/12, "Month Day": 12/12, "Date Time": 2023/12/12 14:00, etc.
Momen is a no-code web app builder, allows users to build fully customizable web apps, marketplaces, Social Networks, AI Apps, Enterprise SaaS, and much more. You can iterate and refine your projects in real-time, ensuring a seamless creation process. Meanwhile, Momen offers powerful API integration capabilities, allowing you to connect your projects to any service you need. With Momen, you can bring your ideas to life and build remarkable digital solutions and get your web app products to market faster than ever before.
