I am trying to display a repeating group of bookings by a type, as well as by the DATE of the booking by using a “Date Picker”
The problem is, the Booking Date in the database can only be set up as Date AND Time. I can’t see an option for just “Date” so when I try to filter the list of bookings by date with a date picker, it doesn’t show them.
If I change the date picker to be Date and Time and choose the correct time of one of the bookings, it will show the booking - but I don’t want that. I want to see ALL the bookings for the whole date, not a specific date AND time.
Option A) Create a text field, and when you store the date, use the datepicker’s value:formatted as and select a format with only date. Filter using this text field ( the date picker’s value:formatted as again)
Option B) Filter twice the date: 1 - Date field > datepicker’s value:set sec 0:set min 0:set hours: 0 and 2- Date field < datepicker’s value:set sec 59:set min 59:set hours: 23
I’m not really sure I’m following what you’re saying…but
Attempting to store the date for "Booking Date’ from a “formatted as” (date only) text field does not save the date correctly. It seems to add some arbitrary hour value once put in the database. Apparently, in the database it MUST be in format mm:dd:yyyy hh:mm am/pm which is very frustrating.
If you store in a text field, you can format is as you want. So you can exclude the time
All of what I say are function that you have when you click “more” after the date value from date picker
option C, if you wan’t to continue to use date field, is to set the date and TIME. Date picker basically use the date selected + current time. But you can force bubble to set 00:00:00. Again, this function come after date picker’value by clicking more and you use :set hour 0:set min 0:set sec 0
@tonymoulatsiotis I made an example page for you to see what you can do based on what @Jici suggested. Basically, when you input the bookings into the Booking Date as a formatted date you force Bubble to save it with the time 00:00:00, then you can filter your repeating group to use a Date Picker that is looking for a record from that date with the same time of 00:00:00.
In my example, when you create a new record using the button Add Booking, the workflow sets the date to be the date you selected, and then saves it with the time as 00:00:00 instead of the current time. All your bookings will be saved as the time being 00:00:00. Then the search Date Picker that is being used to filter the repeating group uses the date set in the Search Date Picker, but also forces it to use 00:00:00 so that you can get a match.
Bookings will have a date and time, so I need to store it as date and time, but I want to be able to show all the bookings on a single date…excluding a time check. I want it to show all the bookings in like a timeslot fashion…so like each day will be split up into 30 minute timeslots.
When I choose say June 12 in the date picker, it will show all bookings for June 12, but within that repeating group will be another repeating group of timeslot constrained to bookings associated to that timeslot…which is also a head scratcher on how to set up.
Maybe I can get it to store the date from the date picker just as “text” in the database instead of “date.” For example when I create a booking, it will make the booking date the actual date and time specified by the user making the booking, but it will also, behind the scenes, take just the date and enter it in for that entry, then when I want to show all bookings with that date I will get it to check the “text” date field, not the date, date field…
I will check your example page but will also have to mess around myself. Thanks
Have you tried using a calendar plugin yet? They make it pretty easy to display events on any given day and display them in chronological order with appropriate chronological placement.
So far, I am able to mostly do what I have in this picture except I run into a problem
If there are no bookings on that date, the Repeating Group of “Bookings” doesn’t display, thus moving the rest of them up, destroying the layout/formatting.
I’ve tried creating a basic square object that would only show if the repeating group of bookings is empty, but it doesn’t seem to work, or I’m not doing it correctly.
What I’m trying to do seems like very advanced stuff, but basically I am trying to build an internal software for a company I work with and this is only a small piece of what the software will do, but I think it’s one of the most complex, difficult parts of it so I figure if I can create this timeslot/schedule/booking thing then I should be able to build the rest of it, so I might as well start with the most difficult part.
I’m a bit confused about the layout you have there, but you might consider making the time slots a date range (ie: 7AM - 7:29:59AM / 7:30AM - 7:59:59AM) and then setting the elements you use for your display of the meetings to constrain based on the date being inside of the range.
The ability to mitigate issues with your repeating groups height collapsed if no entries can be addressed in various ways. Easiest would be to design it using the vertical scroll layout…if you don’t want the scroll bar visible because of looks, then just use HTML to remove them.
Sorry if my thought doesn’t solve the issue, I’m just not sure what the layout is supposed to be.
I’m not sure how to better describe it other than I want a chart of bookings based on timeslots in relation to a person and date. So, the entire table is ALL bookings made on whatever date is chosen from the date picker, organized by person (left column) and timeslot (top row).
When a booking is made, the start and end time would be chosen which I would then want translated to be shown in this timeslot-manner…
Then the next step is to add the ability for bookings to be made by just clicking on a timeslot square, if there isn’t a booking made there already of course.
As long as each person can only have a total of 1 booking per time slot and all time slots for each person are the same, that approach would be okay.
If you allow more than one booking per time slot, your formatting will be off because of dynamic heights associated with how many bookings to show in that particular time slot.
Set up your time slots as I indicated as a date range and you should be fine, but working with dates and scheduling is quite difficult. The most complex and difficult project I’ve undertaken in Bubble is my Calendly Clone Template
If you feel stuck and need some personal training on the task at hand, let me know and we can arrange a session as that is a service I provide.
Sorry I am not being paid for the work I am doing and am just experimenting with this platform to see if I can build what I have in mind, so I’m not in a position to pay someone for coaching or to pay $250 for a template. Thank you though.
No worries. With persistence and an inability to give up, you’ll be able to figure it out. Most everything I’ve learned how to do in Bubble I’ve learned from scouring the forum and trying out the different approaches other Bubble users have suggested.
Is there no way I can edit the style of Bubble’s calendar to get rid of all those buttons and titles etc? I see the element itself doesn’t even actually have a style applied to it by default, and when I create a new one there aren’t any options there.
With regards to your comment regarding scouring forums and all that stuff, if I’m going to spent umpteen hours learning how to use Bubble and create more custom things which is likely going to require coding, I might as well just learn coding. I started learning Javascript last summer but was getting very frustrated which is why I started looking for tools and platforms that may help me create what I’m looking for faster and easier, but it doesn’t seem Bubble is really suitable, nor are most other platforms…unless I want to pay people hundreds of dollars to use premade plugins.
I’m not sure. I create my own calendars when working on date related data that needs to be displayed in a custom way. To do that I use free plugins that get me the dates and then I just use Bubble elements to customize the look. If I remember correctly I first did this about 5 months after starting to use Bubble and it took me about 2-3 hours to put together and I was able to only because of the forum posts on the subject.
You may find some calendar plugins available that have some different functions and features, but not sure if there is one that really fits all of your needs. You may want to search the plugin marketplace, test out the different plugins available and/or message the developer and ask if it would be suitable for your needs.
Maybe. Everybody has different capacities for learning new things. It took me maybe 6 months of using Bubble to feel confident I could build anything I wanted to…took another year and a half before I felt like I really knew most everything I needed to. Everyday I learn new things.
Not sure what the average amount of time is for people to feel like I had after 6 months; I would assume it is about half that. Also not sure how long it takes to become a full stack developer with normal code, maybe double that, but still don’t think that most people would be able to build what they can with Bubble in the same amount of time when starting out from null.
If the reason Bubble isn’t suitable because there is a chance that paying hundreds of dollars for pre-made plugins maybe necessary for the type of platform you are intending to create, and you have already started learning Javascript, you might think about learning Javascript for the purpose of building plugins in Bubble.
I think part of what makes Bubble so powerful, is the ability to extend it through things like plugins, APIs and custom code. When I first got started off, and still today, I follow the same thought process for using plugins. 1. Try to do it with core Bubble features. 2. Look for a Bubble built plugin. 3. Look for a free plugin by reputable developer. 4. Look for paid plugin by reputable developer.
One thing that has changed though with my approach to plugins is that now I am more willing to pay for a plugin rather than spend hours or days to learn how to do it myself because in the end I value my time in such a way that it is cheaper to spend $20 - $80 for a plugin that will make the world of difference to my app.
If you are learning Bubble to build multiple apps, you may want to focus on developing plugins as well to avoid using other developers plugins. If you are learning Bubble to build an MVP to try and monetize the app, consider the money spent on a plugin as money well spent since it could save you a lot of time.
I appreciate your taking the time to reply and help explain things. I really do. I was doing javascript and React courses for a few months starting in roughly september of 2020 but felt like in order to build what I had in mind from scratch, there was absolutely no way I’d be able to do it in a reasonable timeframe. My friend who is somewhat of a developer said it would take him at minimum 6 months to build it himself and his knowledge was much more than mine. (This was a different product idea than what I am working on right now). I discovered I could likely make that product with Wordpress + free plugins but that is kind of on the backburner right now because I have gone back to work full time and feel frustrated with the software we use at this company so I am just trying to see if I can come up with something easier to use.
I just find that a lot of things in Bubble do not make sense to me so I feel forced to buy something because Bubble does not do a good job of explaining very in-detail things. Like when I am trying to set a data source and it turns red. WHY? There’s no error message or anything indicating why that data source is incompatible or does work for whatever reason - other than sometimes it comes up and says "what you’re trying to set is type “text” when you have the type set as “date” or whatever - but other than that it doesn’t tell you why it’s not accepted.
I’m trying various plugins to see if I can generate the 30 minute timeslots I want to use for the schedule layout. I’ve checked out Bubble’s generator, and a few other ones but none of them seem to be able to generate the date down to the time level…except for:
I can get it to work with “Calendar Tool” (it has an icon of a Fox?)
So, I have Calendar Tool set up to use the date picker for the date and time. A horizontal scrolling RG set up with the source of the Calendar Tool, with a text element displaying the current date in the format of the time only and I get the 30 minute timeslots for the entire day - cool it appears to work.
However, I only want the schedule to show 06:00 - 22:30 time intervals. because nobody is going to be working earlier or later than that, ever. So I’m trying to figure out whether I need to edit the “data source” or add some kind of conditional to the RG to exclude them but the system Bubble uses to do this is not intuitive to me and if I make a mistake or it’s not working, there’s nothing to tell me why. (text is RED but it doesn’t tell me why as mentioned above).
is the explanation of why it is not working. This was a struggle for me personally when I got started too. Basically if the data type you are working with is of a specific type (text, number, date, image etc.) any attempt to create a dynamic expression that doesn’t evaluate to that same data type will be a red dynamic expression implying there is a ‘mismatch’ between the data types.
For example, if I set a repeating group to have a content type of “Date” and I try to put a datasource which is actually referencing Text then it would be a ‘mismatch’ because the content type data and the data source data need to be of the same type. Gotta be apples to apples and can not be apples to oranges.
When working with data types there are also operators that may change the type of data it evaluates to. For example, using a number data type and performing the operator ‘formatted as currency’ will make the data evaluate to a text.
I’m not sure what Bubble has put together in their free tutorial section but it may be worth checking it out.
I would end up using filters to set the times to exclude the dates you don’t want. When working with the Calendar Tool plugin those ‘time slots’ are just dates of different times.
I’m trying to figure out how to do this right now.
I have a date picker formatted to Date only, a Calendar Tool element on the page which generates a list of times from the selected date of the Date Picker at 30 minute intervals.
Then I have an RG set up as type “date” with the data source as the Calendar Tool’s “List of Times”
Then, I’m trying to use “filtered” and adding constraints, but I can’t seem to be able to do what I want to do. I want the filtered list to be from 05:00 and ending at 23:00.
So when I choose “filtered” then add a constraint, whenever I try to set it how I would think, it turns red but doesn’t tell me why. For example trying to set a range, or trying to say “This date change hours to: 05:00” it doesn’t work but doesn’t show an error as to why it’s turning red.
or saying "Constrain: This date > This Date + Hours (whatever) But I cannot do that! When I choose > then This Date - there are no further options for me to choose.
Edit: So after some trial and error I was able to do it like this
This exact issue is why I plan to release the Timeslot generator and filter portion of my calendar plugin as a low cost standalone to do exactly this.
Produce time slots and filter them by day and time of day. (Plus other goodies)
Would you wanna wait to check that our or even same the calendar plugin itself. I give 2-week trials for free to make sure it’s worth your time and your investment.
Also, nice work above! Looks like you won’t need the plugin if this is all you need!
