I have a high interest in creating my own event calendar/scheduler for my site and found Bootstrap Calendar, it has real potential. I looked at dhtmlxScheduler but its hard to customize the look, it has a lot of nice features though. I have a Fullcalendar now and I like the new Scheduler but I still want a more custom look and some custom functionally.
My JS/Jquery is limited so it makes it difficult to get a real picture of BS-Cal layout and unfortunately there seems to be little documentation other than comments in the code.
So my issue with BS-Cal is the event ordering/stacking in the week view.
The Question - Can the events be reordered in a per day list like the 2nd photo below.
So far - I see the offset class for the columns and the events but the events seem to be wrapped in a "row" div which forces a single "list" for the whole week rather than per day placement order left to right on the table.
Here is what I believe is happening:
This is what I'm hoping to accomplish:
Related
I have a calendar with dayGridMonth view.
When I create 1 event, the row with the week increases in height a tiny bit. That's not that bad, but when I create another event, the row increases very much and makes the calendar look ugly.
You can see the exact problem in a Codepen from their offical website.
As you can see, the row height has increased: Screenshot from codepen
BUT:
In the Demo on their Website, this does not happen. This is the behaviour I want. How do I achieve this? I was unable to find a tutorial for anything like this.
I actually found it.
This behaviour is caused by dayMaxEvents
I found it in the Demo DragAndDropDemo.js
I am using fullcalendar.io in my project, and although it's working great, there are some corner cases that makes the events display strangely. This is from an real life example in our project where there are drawn in a lot of parallell events:
You see here that on day number 2 from the left, three events are displayed as thin lines. If I change the calendar to day view, it look like this:
So we see those three events are pushed out to the right hand side even if they could have used more of the available space here.
I guess this might be a problem with the algorithm of how fullcalendar.io draws up the events, but have anyone else encountered this problem and found a solution for it?
Okay, so I've been banging my head against this problem for a while now (months). But I can't seem to find a simple solution to creating a calendar with Javascript that allows my to dynamically add events to it AND support multi-day events.
My first approach was using divs with year-month-day associated IDs so I can easily add events, the issue here is that there is no way to support multi-day events, adding single day events is easy though.
My latest approach was to dissect the google calendar, they apparently use tables, which is a good solution as it supports multi-day event blocks easily (using colspan), however adding/rendering events on a table seems to be an entirely different feat, as I can't simply add them to a column/cell block. I have to generate a new row, and then if it is a multi-day event that pushes events down, I would have to re-render those parts of the calendar as well.
Here is a link to my current "dynamic" approach that I've been working on: https://r3dux.com/css/caldyn.php
and here is a static version to show what it is supposed to look like with events on it: https://r3dux.com/css/cal.php
I do NOT want to use a third-party calendar of any sort. I want to do this with pure Javascript, NO Jquery or other frameworks.
If you could simply give me some suggestions or different ways to approach this, that would be super helpful.
The basic requirements are that it has multi-day event support, can be adapted into a "week" view (only shows the current and next week), and allows me to display individual start/end times for each day of an event. I also need to somehow support scheduling events across Daylight Savings Time and Standard time. Like, if it is currently DST and a schedule an event in the future when it's STD, I want the time the user selected during DST to be when the event is scheduled, so the time doesn't change an hour when the switch happens.
First off, I would consider refactoring the renderCalendar function - it's huge! It cannot be easy to imagine, let alone implement, multi day events with that code.
I have created a fiddle based on some old, unfinished code (with which the goal was to create a google-like calendar) that can perhaps serve as a suggestion on how to do it. It's very far from what you want, but maybe you can draw some ideas from it.
It is written without any third party libraries, but it requires a newish browser. The map, some, etc functions can be easily polyfilled however.
The Calendar, Day and Event prototypes serves as a way to avoid huge methods. I could e.g. remove the logic in the rendering methods to completely follow an MVC pattern, which eases development.
To dynamically add events, push an Event to Calendar.events and call Calendar.render(). It already "supports" multi day events and single events, but it most definitely needs some work.
Good luck!
I'm working on a Rails app that has events in it, and I'd like to be able to show a timeline of events. There's an Event model, and events have a start_date and end_date.
I can show the events by date etc without any problem. However, what I'd like to be able to do is create a horizontal "timeline", similar to the network graph on Github. Basically I'd like to be able to plot a graph with lines from the start date to the end date, and for any given set of events I'd like the timeline on the top to start with the date of the earliest event and then span horizontally in even increments of time to the end date of the last event.
How would you accomplish something like that in HTML / JS? I believe I understand the server side of things enough to pull any needed data from the app, what I don't understand is how to make a view out of it. To be honest I'm not even sure where to start.
I really appreciate any feedback or suggestions on how to get started in tackling this. I realize this question is more open-ended than ideal, I'll be happy to try and make it more specific in response to comments.
try event_calendar, you may see some screen shots here and this is the railscast
HTH :)
I was wondering if there was a simple way to make a topdown list calendar for a website. I don't want to use the google calendar. I would also want the calendar to show like the next 5 events and hide the rest until the 5 shown have already happened. If there is a way to do this with jquery I wouldn't mind doing that either.
Here's a good starting point:
http://www.javascriptkit.com/script/cutindex1a.shtml
Just about every layout for a calender structure, and then event-show limiting etc could be implemented by you at the end. At the least it'll give you a base with which to work from.
Hope that helps.