event_booking_timeline

Description:

event booking timeline

Event Booking Timeline #

Event booking timeline is a widget used to display the events booked in a specific time of the day.
Note : The arrow can be added on top-center of the timeline, for better user-experiance.
Features #
Timeline color changes according to booking status.
Time format displayed in both 24 and 12 hour formats.
Callback when the time is changed.
Inbuilt class for data.
Custom callbacks & exceptions
Highlighting the current selected slot- duration can be configured.
Skipping the blocked slots to the next or previous available slots.
Upcoming Features #

Optional haptic feedback while scrolling
Zooming timeline feature - Timeline can be zoomed the change the number of divisions, for precise times.
More configure options.
More callbacks

Getting started #
Install #
dependencies:
event_booking_timeline: ^0.1.0
copied to clipboard
Usage #
Simple Timeline with booking #
API #

startTime - Starting time of the timeline (24 Hour Format)
endTime - Ending time of the timeline
is12HourFormat - The time to be displayed on the timeline
moveToFirstAvailableTime - To move the timeline to the next available slot
numberOfSubdivision - The number of subdivisions between the main divisions
widthOfSegment - The width of each time segments
widthOfTimeDivisionBar - The thickness of each division
availableColor - Color to indicate available slot
bookedColor - Color to indicate the blocked slot
currentBlockedColor - Color to indicate the current blocked Color
moveToNextPrevSlot - Should the timeline skip the blocked slots
durationToBlock - The duration(in hours) to block the time - value should be in accordance with the number of subdivision
onError - The callback for any error.(e.g If the current slot is booked)
onTimeSelected - The callback for the time change
showCurrentBlockedSlot - Whether the current blocked state should be shown or not.

Sample #
EventBookingTimeline(
booked: [
Booking(startTime: "00:00", endTime: "01:00"),
Booking(startTime: "01:00", endTime: "02:00"),
Booking(startTime: "08:00", endTime: "09:00"),
],
startTime: "00:00",
endTime: "24:00",
is12HourFormat: true,
moveToFirstAvailableTime: false,
numberOfSubdivision: 5,
widthOfSegment: 100,
widthOfTimeDivisionBar: 3,
availableColor: Colors.green,
bookedColor: Colors.red,
moveToNextPrevSlot: true,
durationToBlock: 1,
onError: (error) {
log("Error: $error");
},
onTimeSelected: (String time) {
setState(
() {
text = time;
},
);
},
);

EventBookingTimeline.withCurrentBookingSlot(
booked: [
Booking(startTime: "00:00", endTime: "01:00"),
Booking(startTime: "01:00", endTime: "02:00"),
Booking(startTime: "08:00", endTime: "09:00"),
],
startTime: "00:00",
endTime: "24:00",
is12HourFormat: true,
moveToFirstAvailableTime: false,
numberOfSubdivision: 5,
widthOfSegment: 100,
widthOfTimeDivisionBar: 3,
availableColor: Colors.green,
bookedColor: Colors.red,
moveToNextPrevSlot: true,
durationToBlock: 1,
showCurrentBlockedSlot: true,
currentBlockedColor: Colors.blue,
onError: (error) {
log("Error: $error");
},
onTimeSelected: (String time) {
setState(
() {
text = time;
},
);
},
);
copied to clipboard
Demo #
Normal timeline with booked and available state.
copied to clipboard