Skip to main content

Time-slot Component

Intro​

A web app's timeline is like a visual story of events. It shows a line with important points marked on it, like dates and titles. Users can click or scroll to move through time and see more details about specific events. It's a user-friendly way to share project milestones or historical events, making it easier and more enjoyable for people to explore and understand the information.

In this video tutorial you can schedule appointments and events based on available slots. You can customise it by setting start/end times for the user's day, determining displayed time slots and specifying whether to allow or disallow overlapping events.

1. Create Timeslot Fields​

Create a collection with timeslot fields by choosing the Advanced >> Timeslot options. Then name your fields as per the use case.

DrapCode Builder Collection Constructor

2. Drop a Component​

Now drag-and-drop a Collection Form from Components to bind the collection created above.

DrapCode Builder Collection Constructor

3. Create Event​

Now create an event to save data for the timelsot. For this go to Events and choose Save Data and the collection.

DrapCode Builder Collection Constructor

4. Bind Event to the Component​

Now bind the event to the Component which is the Collection Form. For this right click on the form Settings and choose the event from the dropdown.

DrapCode Builder Collection Constructor

5. Create Number Fields​

In your collection where you are storing the user's data you can create a Number field to display start and end time of the day in hours.

DrapCode Builder Collection Constructor

6. Drop Time Slot Component​

In the collection form you can drag-and-drop the Timeslot Component. When you right click to open its Settings you will be asked to -

  • Get start/end day from - the collection
  • Collection name
  • Day Start at Field - day strat in hour
  • Day End at Field - day end in hour
  • Start Timelsot Fields - as per the chosen timeslot
  • End Timeslot Fields - as per the chosen timeslot
  • Duration - of the task/event
DrapCode Builder Text Box

7. Preview Changes​

Click Preview to view the changes.

DrapCode Builder Text Box

8. Apply Overlap Slots Option​

In the Settings of the collection form; tick the Overlap Slots option.

DrapCode Builder Text Box

9. Test Changes​

You can add a new record/ appointment or you can login to find all records/appointments, as need be.

DrapCode Builder Text Box

Conclusion​

One benefit of a web app's timeline is that it provides a user-friendly and engaging way for people to understand and explore the chronological progression of events. This visual representation makes it easier for users to grasp complex information, such as project milestones or historical events, enhancing their overall comprehension and enjoyment of the content.