is it possible to do the exact same thing but with a day view? i’d like to create a repeating group, displaying a 24 hours date range with a increment of 15 minutes. Its a bit more tricky than i thought it would be…
@ItsJustBusiness I would 110% be ecstatic to see a tutorial on how you did these calendars.
I have followed the tutorial on this thread and found it extremely helpful. These others in this example are just like what I need for my project, so I would love to see the tutorial, or if could post the editor of these so I could see how things are set up and give it a go on my own.
I think he set those up so you can see his editor for those.
This is a very powerful technique in general and you can do a lot with it. It can be a TOUCH slow (particularly on some mobile devices) depending on if you’re doing a lot of conditional styling. Issue being that a 42 element repeating group can generate A LOT of on-page elements and conditions.
If you want to see an absolutely insane extension of this idea, see this page:
@keith Thanks for that. I did some digging and found my way to the editor.
I checked out your link as well, that is pretty cool to get the languages to change. I’ve been needing to find some good tutorials or forum posts about how to use bubble’s built in language feature. From what I can tell it requires passing through the URL the lang=(users preferred language).
I’m actually using the calendars to build out the administrative portion of my booking site and was expecting it to take a couple of weeks as I had no idea what I was doing. Now with this post and the editor views I feel it will take a few days. Very excited to knock it out.
There’s not really a built-in facility for multiple languages beyond handling various error messages and built-in element labels (this is known as the “app text” feature). But of course you can extend that.
For a very brief explanation of how I added the multilingual feature to my calendars, see the end of my Medium article here:
I’ve been playing around with this and have no idea about coding. I was able to make the calendar show a two week or any number of day display I set.
What I am curious about is how to get the first day of the calendar displayed to be the current date. Instead of always starting on Sunday or Monday, is there a way to get the current date to be the first in the repeating group?
So, I can’t spend anymore time playing around on this today. I don’t know how to code (why I’m using bubble), so I don’t think I will be able to come up with a way to rewrite the expression to set the first date in the repeating group to the current date.
If any coders could help out that would be much appreciated.
Are there any other languages that I could use in bubble to get more from it?
I want to write expressions and connect APIs from outside platforms.
At the end of the day, Bubble is simply a very powerful and easy-to-use system for building websites and web applications (which one might just call “really fancy websites with dynamic stuff and a database backend” ). Backend technologies can vary widely, but websites and web apps really just boil down to the following (simple but powerful) technologies:
HTML (the basic markup language of web pages)
CSS (cascading style sheets/styling properties of HTML things)
Web browsers as we know them today aren’t just simple applications that display information in HTML. They are, in fact, powerful programming environments. You can think of them as a program that runs programs. Those programs are composed mostly of the three elements above.
(Even if you’re just authoring a static-ish site with something like Squarespace or Wix, a little knowledge of these core web technologies greatly extends what you can do. So Bubble’s not unique in the respect. What you’re doing with Bubble is building web things.)
So Google (and StackExchange and sites like that) are your pal!
Without going on for much longer: What makes Node so awesome is that there are tons of libraries for doing fancy things that are open source. These libraries are all available in a thing called NPM that’s completely integrated with Node. (And in Webtask there’s actually a point-and-click environment for loading libraries from NPM – you can install anything that’s in NPM super easily without mucking around with command-line stuff.)
You can do this (theoretically). What the expression code does is generates the 42 dates that should be shown in the calendar.
You could generate more dates here. (But right you need to be able to write the code for that.)
The issue you’re going to hit is that, extending this technique to draw a full year calendar is going to generate A LOT of repeating group elements and potentially be very slow or even crap out on certain browsers. (The Calendar is drawn via a repeating group.)
I do use a variation on the technique described here for an app of mine that makes calendar widgets.
Here’s a direct link to an example 3-month view calendar built with this technique:
Note that, in my version, I’ve highly modified the date-generation code (I use the moment.js library and related libraries to generate dates and handle some slightly complex timezone manipulation stuff).
Aside: another thing that impacts the performance of my calendar widgets is the way that I compute and identify the blocked dates. Basically, reservations come over to GRUPZ via iCal feeds. The blocked dates are represented by start and end dates. The individual calendar dates do a range-wise search to find out if they are within a booked range and a condition on that element in the RG/Calendar sets their color based on that.
There are faster ways to do that, but for various technical reasons, this is the way it works today. (A somewhat faster approach is to instead use a list of individual blocked dates and set the conditions that way. This is possible in my app (and in fact I do pass a list of such dates), but the rangewise comparison is actually the “better” and more maintainable way for this to work.
I’m always working on little tweaks to improve performance. (One that occurs to me now is that I think the range-wise comparisons are always done over a property’s entire future bookings, not just the ones that are “in view” in the displayed calendar. There may or may not be an advantage to changing the way I do that. One issue is that these comparisons are (of necessity) in a :filter condition (because they need the “Advanced” comparator) and so they are evaluated in the browser / on the client side. This somewhat limits the number of available performance enhancements that are possible.)
The reason I mention all of the above is that (1) in one’s own application of the custom calendar technique, you might get better or worse performance than what I get, depending on what it is you’re doing and how you’re doing it and (2) in my particular application, there’s a lot of stuff going on in the browser and so it’s very sensitive to the client’s compute power.
(So, if you think my calendars suck or are sub-optimal, that’s on me, not on the general coolness and power of the custom calendar technique in general! )
Great tutorial! Exactly what I’ve been looking for (to a point anyway)! Thanks for posting it!
I have created a nice custom calendar for my event-planning app, but I am running into an issue recreating a feature of the Full Calendar plugin.
My events have the possibility to span multiple days (EventStartDateTime and EventEndDateTime are several days apart).
With the Full Calendar plugin an event spanning multiple days shows up as one (clickable) consecutive line spanning the corresponding date squares.
To display a full list of events on each day in the calendar I am using a repeating group to show all events on the current cell’s date (with hour, minutes and seconds set to 0).
Of course that way each calendar’s cell is limited to showing events each corresponding with the specific date of the cell and not for dates before or after - which is of course needed to show events on multiple consecutive days.
I can get multiple days-view using @ItsJustBusiness’s example, but that’s using a date picker on the page to display
I think I should be using several :merged "search for"s, but I can’t seem to get it to work.
What logic am I missing here? Any ideas or tips would be really helpful and greatly appreciated!