I'm trying to find a way to collapse events that have the same titles, and have overlapping start and end times. This is using FullCalendar js (FullCalendar.io).
This is so that when a person loads the calendar, the duplicate events are collapsed together but with a caret (triangle) that shows the events can be expanded out.
Looking at the docs for FullCalendar, I haven't found any methods to do this directly. I have found a similar question on StackOverflow that shows a calendar merging events when they are within 30 minutes of each other, but wasn't able to adapt that code to get what I wanted (Fullcalendar: How to merge two events that are next to each other?). That also puts the two events into the same event, which isn't exactly what I want to do.
I've tried modifying the code in the other question, and also looking to see if I could perhaps take the elements and add classes to them with jQuery to get the similar events, but the problem is that the events are on different rows, and don't seem to be predictable where the next one would be.
I've also considered trying to do something like add a <details><summary>Duplicate Event Titles</summary></details> tag around the duplicates, which will collapse them and show them with a caret, but they are on different rows and I am not sure that will work because the html would need to wrap around unrelated rows and also collapse those.
Unmerged:
Unmerged Events with the same title
Test case showing duplicate events (https://codepen.io/anon/pen/QYQOwy)
Related
I have a calendar-like view that shows a table with one column per day of the week (see this image). Each row represents a specific thing that can be booked for a time. The idea is now that a booking can be extended by dragging the outer edge to the next day in the table, or shortened the same way. The active booking has a span on each side of the cell that is supposed to be the handle for dragging.
My main problem now is that the usual drag & drop features in browsers don't seem to fit my situation. I don't want to drag something and drop it anywhere else, I just want to drag to extend the item.
Is this still something that can be done with the usual HTML5 drag&drop feature or some generic drag&drop library? Or is there any other way to achieve this? Any pointers on how to approach this problem?
I'm using React for this, which might make some solutions difficult to integrate if they manipulate the DOM directly.
ummm not sure what to do here , I thinks its unlikely the link will change soon , I can describe the repo 'Allows individual or group selection of items using the mouse. Click and drag to lasso multiple items, hold the cmd/ctrl key to select non-adjacent items'. I can briefly describe what the lib code does: uses keydown, keyup and mousedown listeners to create an overlay and detect covered nodes in the DOM .
When using pickadate.js is there any event to listen to when the next/previous month buttons are clicked?
I have read through the api and tried to find a response or similar question but I'm coming up short.
I understand this might not be the best way to go about the problem so I appreciate any other approaches.
The reason I am adding styling this way, is I want to select multiple specific dates to be highlighted. I understand there is a datepicker.set('highlight,.. option, however it is my understanding that it only supports one selection at a time.
I was manually applying the styling changes to the correct dates through jquery on render, however switching months loses all styling and even any handle to el(s), but doesn't appear to fire any of the events you can tap in to.
I have a list with quite a few elements (each of them is a nested div). Each element has a custom onclick handler.
JS updates the list several times per second, this may result in:
adding or removing some elements
changing text in some elements
changing styles in some elements
changing height of some elements
etc.
Most of the time the update makes small changes to the majority of the elements.
To minimize reflows I should remove the list from DOM, make the changes and append it back. The problem I have with this approach is that when user selects some text, the next update will reset the selection. (And the next update comes within a second) If user clicks a button his click may fail to register if there was an update between mose_down and mouse_up.
I understand when the selection resets on text that have been changed. It makes sense. But with such approach any selection in this list will reset.
Is there any better way to do this? How would you implement such list?
This list is fully generated by JS. If I'm removing it from DOM anyway, is there any benefit to modifying it instead of recreating it from scratch? Creating it anew each time would require less code.
This sounds like 2 way data binding, there are a couple of good custom solutions to data-binding answers on here: Handy stack link. Alternatively backbone.js and knockout.js have good techniques amongst quite a few other frameworks (angular ect).
Additionally, if you want to have a pop at it yourself (which I highly recommend to get a better understanding) you could use the proposed 'Object Observe' function. There's some handy documentation with some examples on how this works over at Mozilla. as well as The trusty HTML5 Rocks, which is a nice simple tutorial on using the new Object.Observe functionality, well worth a read.
Hope this helps!
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!
Kind of a two-part question. First, in ExtJS 4, how would i go about attaching a hover listener (aka mouseenter, mouseout) to the rows of a grid panel?
Secondly, reason I want that event is so I can show a couple action buttons within one of the cells when any cell in the row is hovered over. What would be the most efficient way implement this menu (creating the actual html elements). My first thought was to create a renderer for the cell that will hold the menu and return the html for the buttons in that renderer, initially hidden. However that seems like it would be alot of extra html being put into the dom since those same buttons would be created for each row thats displayed in the grid.
Part 1:
You can do this by tracking the itemmouseenter and itemmouseleave events on the grid view. However, for these events to be fired, you need to make sure you enable trackOver on the grid view.
Note that this all applies to the grid view config, not the grid config, and that the trackOver config is off by default for performance reasons. You want to be careful about doing too much in these events.
Part 2:
A better way to do this may be to define an editor for the cell, which is a component containing the buttons you wish to use. You can trigger the editing with the events discussed in part 1. This will mean your buttons get reused in the same way other editors do, and can be Ext components rather that html cludges.
I had a similar issue with showing menus for toolbar buttons on hover (and hiding them on mouseout). I wrote up a HoverButton extension which you should be able to easily extend to be a HoverRow if you need, using the events mentioned in Simon's solution.
Ext.HoverButton
Hope it helps.