Drag/drop groups in calendar | Can any plugin do this?

Need help
1

Hi guys,

So I am looking for a calendar (or rather one day view) solution that will allow me to:

  1. Create an event by allowing users to drag (like in Google Calendar) to choose the time of the event e.g. form 1 pm to 3 pm
  2. By dropping a drag/drop group on the calendar and then resizing the event by stretching it.

I already build a day view calendar (without repeating group - just creating about 30 drop areas - every area is 30 min) where you can drop a task from your to do list - but its very limited- when you drop a task it is added to that 30 min drop area and you can’t crate one event that will last 1 hour - you need to create 2 tasks o the same name and then drop them.( see screenshot)

image
image.png1386Ă—570 68.3 KB

I can’t figure out the way to allows user to add an event by “stretching” the group and how to make a task that will last e.g. 1 hour (although I am experimenting with that right now)

Could you please point me into right direction how to do this (is it even possible?) or recommend a plugin that will allow me to do this?

Thank you!

2

I think you need to put a drop group into the repeating group so that each cell of the repeating group would have a drop zone in it.

You should have two repeating groups, one for the times of the day and the other for creating tasks. You should make the user able to create the tasks and assign a duration of time to it as a data field.

And think about the user experience and if they really need to be able to “stretch” and event to increase or perhaps decrease the duration…it may be easier for them to create the event and select a duration before it is placed into the repeating group acting as a day view.

Here is a tip on how to work with reordering a repeating group using drag and drop and times of the day associated with a particular cell

And this is info about creating custom calendars

3

Hey @boston85719. Thank you for the answer.

The problem I had with using RG is that I could’t use fixed number of cells without having some data “empty” that would fill out the RG cells - that makes it very complicated with ordering the cells in right way + it also doesnt solve the problem of task B being twice as long than task B - but takes the same amount of space in calendar.BUT maybe your suggested solution with one RG acting as times of the day is the solution, I will look into it.

Well the “stretching/resizing” is not a must have for now so let’s skip that. But the problem comes when some tasks have been created before it was placed on the day view. Lets assume that user will have to input the task duration before the task will be dropped on RG (maybe through a popop whatever) can I do it in a way that if the task is 1 hour long it will be twice the size of the 30 min task? I dont think we can manipule the size of the RG with user input. :frowning:

What I am trying to build is “simple” day view calendar for planning the day and a tasks box where you have your tasks stored which can be dropped on the day view calendar - the calendar should seen in full (from 6am to 12 am). (see screen shot above)

Thank you for the forum links, I already look through it but I will do it again.

4

Are you not able to use bubble’s default calendar for this? It has drag and resize.

Alternatively if you want more control over the functionality and look and feel of the Calandar you can consider using my Air Calandar plugin.

5

you need a repeating group acting as the calendar for day view. Up to you have you set up the sizing of the cells, if they are to be 15 minutes, 60, 30 or 1 minute. You would need to set conditionals onto the groups in the cells to show depending on the “event” that is placed inside of them to show based on the events duration.

It is a complicated task, one that takes a lot of consideration into how to do it, but you have to be able to use conditionals and make use of time according to “code” which breaks time into numbers ( such as days of the week Monday = 1 etc. )

I have not mastered time according to “code numbers” but I often find going off the bubble forum and researching how to do things on the internet helps me to figure out difficult tasks on bubble.

There is a lot of work arounds and “investigation” into techniques that work or don’t work.

In terms of setting up an event on a popup, there is nothing wrong with that…it is about having your database set up correctly to store the information you create so that you can display it as you wish. Doing some research onto relational databases might help you understand the relationship between the events you create and the calendar display because you need data types of “events” and a datatype of “calendar events” and you datatype of “calendar events” needs a data field of “events” to create a relationship to display those events appropriately ( at least that is my first thought, but again, investigating technique may prove it wrong)

It is doable to have a R.G. with 30 minute intervals ( ie: each cell is representing a 30 minute duration ) and to have one event of 60 minutes be displayed as two R.G. cells of 30 minutes each.

Also to be aware of the R.G. cell “index” which is a number that just represents which cell it is in the R.G. is key. I believe the post I linked to mentioned that concept which I became aware of through my week long attempt at creating a R.G. with drag and drop features for rearranging events according to their time of day for a tour company itinerary.

And having a repeating group that is the times of day will solve the issue of having times of days without any events for that time duration be shown, because your data type would be “times of day”, which should be the times of day you wish to be shown such as 6AM to 12AM.

1 Like
6

No, Bubble calendar plugin is very very limited for my needs.
I also look at your plugin before but I don’t think it has what I am looking for. And what I am looking for is essentialy day view and weekly view with hours combine with the ability to drag n drop tasks like in Todoist but on the daily and weekly view. So it less of a calendar but rather a task planner with daily view.

7

It seems I will need to step up my Bubble game then.

I will dive deeper into in the next couple of days that because at this moment I don’t even know where to start.

So it seems I need to have a RG within RG. Still can’t wrap my head around how to make an event covering two - 30 min cells rather than having two events covering 30 min - each one for each cell.

8

It is not a repeating group inside of a repeating group.

It is two different repeating groups…and in fact you only need one.

  1. repeating group is the times of day broken into 30 minute slots ( each slot is represented by a cell in the R.G.) you need to put elements into the repeating group cells to represent your events.

Check the post I linked to about making a custom calendar…that would be a place to start…then read the posts about the drag and drop (which isn’t necessary as you don’t need drag and drop functionality, but if you were interested in giving a user the ability to move the event from one time slot to another you could utilize it.)

But yes, stepping up your bubble game is necessary…one key piece to “bubble game” is getting comfortable with banging your head on the table while pulling out your hair in frustration, then regrouping, searching the forum, reading through dozens if not hundreds of posts, to finally try again, then fail again, go onto @romanmg youtube channel to see if she has a free tutorial, if not search the forum again and repeat until you eventually figure out the solution.

Sometimes you have to think outside of the box…like way outside the box. In doing so you’d be surprised at what you could come up with for solutions, and very surprised about how much you can learn from the many mistakes you make, the hundreds of posts you read, and the tutorials you watch and rewatch.

It took me over a year and half to feel comfortable with bubble ( ie: feel like I could make what I want ) and still after two years on the platform I scour the forum daily for answers to questions I have, watch tutorials for the 10th time and constantly question my sanity for jumping into this…then when at 2AM I jump out of bed to test a theory and it works, I still get excited about waking up the next day to move onto my next challenge.

Bubble is extremely powerful, and like any powerful tool, it takes a lot of time and effort to really understand how to make the most of it. And like anything you are learning, it is best to make mistakes and try to learn from a variety of sources.

I had to go to a dozen sources off the forum to learn about how time works in coding, and same for database structure and design, basically everything about building a platform except how to write the code (but in reality I have learned a bit about writing code since utilizing some html, javascript or css has helped out in some instances)

3 Likes
9

If you ask me this is more of a calendar with just ability to drop the events/tasks on the calendar.
The Air Calendar can potentially allow external events to be dropped onto it. I haven’t implemented it yet since it’s not a highly requested feature.

I will leave you to try out the repeating group approach and if it doesn’t work you can hit me up and we talk.

10

I really appreciate your time. Thank you.

Thanks to your PM I think I finally got it.

Much needed kick in the ass! :wink:

11

Thanks @seanhoots. I will let you know if I have any questions regarding your plugin :slight_smile:

12

@bartek.dev Are you looking for something like this:

This was done with the Air Calendar and the normal bubble drag/drop groups.
NB: This feature isn’t released yet. Just implemented it in response to your post and will be available in the next release sometime next week.

6 Likes
13

:heart_eyes: it’s beautiful!

2 questions:

  1. Can I change the color of the event depend on some condition (e.g. the task is done so the collor or the text within the event will change)
  2. Can I dynamically change the border style of certain hours? What I mean is, set the condition: that for this current user change the style of the hours between 10 am and 12 pm from white to lets say green.
14

Yes. You have control over every individual events colors. You can take a look at the Air Calandar demo.

Unfortunately no. The calendar is a grid system so there is only one style for all the lines and backgrounds. You can customize individual events conditionally like in ur first question but not the calendar grid. Have you by chance seen this anywhere.
A dirty workaround though will be to use background events and color them say light green. Then allow event overlaps so you can drop events over it. But as I said this is a dirty workaround

15

With the drag n drop ability the plugin is great enough. Let me know when new version will drop. I will probably implement it next month!

16

This topic was automatically closed after 70 days. New replies are no longer allowed.