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.
Related
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)
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 .
I'm relatively new with web and I am using FullCalendar on a personal project and am trying to accomplish what I would think would be relatively easy. I may have to change some code around as I don't think what I want is available out of the box.
Here is a screenshot of my version of the FullCalendar I am using:
As you can see, I have several "events", well essentially they're a group of events and instead you just see the number of events for that day. So for Today, there are 10 events essentially, I just group them up. The problem is, you have to click above the event in order for the cell to select. I am trying to make it so that the event or the count text IS essentially the background without the rectangle, etc. See the screenshot below for what I am going for:
Making the eventColor transparent just makes the entire event disappear which is not what I want. I've also tried changing the background and border colors. The rectanglular shape is still present. Any ideas or possible suggestions regarding this? Thanks in advance for your help!
Not exactly sure what you mean, could you show us an example?
If you want the user to click "trhough" the event, you can use the CSS
pointer-events: none
This will ignore the mouse events (such as click) on this element, and then click on the one behind.
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 not sure this is even possible. I have a UI built that uses javascript and css, the interface users use a keypress to navigate. Css for the layouts that change per client, like a "skin". Javascript controls the functions and monitors the users keypresses.
The setup has 2 menus, a lower one and upper one. When you load it the lower one is focussed and you can use left or right arrows to go between the menu items.
In normal circumstances you would press "up" to get an upper menu, however this one client does not want this menu at all.
The problem is that we cannot just simply edit the javascript to prevent it, since the same javascript is used for all the clients, only different css get loaded based on which client is selected.
So now I have the upper menu hidden, but the problem is that the javascript still allows you to press up, but now since the top menu is not there, you lose your focus, and nothing is highlighted. The end user doesn't know why or how they lost focus if they press up by accident. (since they know no different setup where the top menu is there, they don't realize that they should press down, they just know nothing seems to happen when they press left/right)
What I want to do, is somehow, in the css, prevent the users from pressing up. Since we can't just go change the javascript.
Is this possible? Or is my only solution to modify the javascript?
TIA!!
Thanks to all who offer advise, just to clarify, we will make a new release with a function to check if the client wants this other menu, and disable the up button if not, however that will require a new release of the software, and a full pass through QA. Just trying to quick hack this one client in the mean time.. :)
Our final solution would have a boolean field in the database, and if it's true, the javascript will have an ignore for the up key, if false, then act normally.
Change the code so it only acts on up-arrow key-presses if an element isn't present.
EG add a p with the class="noupkey" then stop the event from firing like :
if($('.nokeyup').length === 0) {
//Do normal behaviour
}
Unfortunately there is no correct way to disable components through css, for this type of functionality is meant for javascript.
The philosophy for most programmers that I have worked with is that you should allow the end user to decide if they want to use a new feature.
What I mean by this, is that you should leave an option in the app that lets the person disable the component themselves. This way you can have the same set of javascript for all users and still disable any component in the correct way. The real advantage to this is that you wont have to deal with this ticket ever again, the support staff could simply walk any client through the operation of recreating the requested feature.
Most of this solution might be unusable to you however. I understand it's not easy changing your workplace convention.
Here is something that might be a little more useful, How do I disable form fields using CSS? Some of the advise might be applicable to any component, including menus.
Actually it is very odd solution but it can be done with little tricky solution .
Make One transparent Div with more z-index , with Absolute Position at the body level over that Up Button , For rest of your applications apply Pointer Events Css property to none so your mouse events will be done on the Below Div .
Then for your Case in which you want to disable that control do not give Pointer Events to the foremost div it will be disabled for mouse events .
Note : There is some issue for Pointer events in IE.