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!
Related
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!
Having discovered requestAnimationFrame just a moment ago, I have dived into all the information I could find about it. To name just a few of the resources I came across in case there are others looking for more info about it:
http://creativejs.com/resources/requestanimationframe/ - explains the basics about it.
http://www.html5rocks.com/en/tutorials/speed/animations/ - explains how to use it.
Anyway, all of these resources tell me something about how requestAnimationFrame works or how it could/should be used, but none of them tell me when it is right to use it.
Should I use it for animations (repeated changes to the style of an element, much like CSS animations)?
Should I use it when an automated event wants to change the css/classes of one or multiple elements?
Should I use it when an automated event wants to change the text value of one or multiple elements? (e.g. updating the value of a clock once every second)
Should I use it when an automated event wants to modify the DOM?
Should I use it when an automated event needs values like .offsetTop, .offsetLeft and then wants to change styles such as top and left a few lines further?
Should I use it when a user generated event causes any of the above changes?
TL;DR: When is it right to use requestAnimationFrame?
You shouldn't yet. Not really, at least. This is still experimental and may or may not reach full recommendation (it is still a working draft at this point). That said, if you don't care about older browsers, or willing to work with the polyfill available the best time to use it is when you are looking to draw things to the screen that will require the browser to repaint (most animations).
For many simple modifications of the DOM, this method is overkill. This only becomes useful when you are doing animations when you will be drawing or moving items quickly and need to make sure that the browser repainting is keeping up enough to make it smooth. It will allow you to ensure that every frame you calculate will be drawn to the screen. It also provides a utility for more accurate time measurements to your animations. The first argument is the time at which the paint will occur, so you can ensure that you are where you should be at that moment.
You should not use it when you are doing many simple modifications to the DOM, or things that don't need to be smoothly transitioned. This will be more expensive on your users' computers so you want to limit this to making things smoother in transitions, movements and animations. Forcing a frame redraw is not needed every time you make a change on the page, since the response will be fast enough most of the time you don't need to worry about that extra couple milliseconds between draws.
As the previous answer says, you should not use it in the discontinuous animation because that don't need to be smoothly transitioned. In most cases, it's used for properties which vary continuously with time.
I want to create my own mouse tracker, like Clicktale and Crazy Egg. Tracking the mouse movements and scrolling shouldn’t be too hard. But what about all changes to the document (HTML, inputs and selects).
Is there an easy way to record all javascript actions on a site. So I can save the actions and later be able to repeat them when I want to replay the visitor’s actions?
Or somehow record all changes that are done to the document (saving the innerHTML everytime there is a change is probably not an option).
The recording must be related to time.
When the recording is done there will be an AJAX request that copies the page and insert the new Javascript in to it so it is possible to watch...
First of all I would like to say that even though the task you are describing sounds to be pretty easy, it is actually far more complex when you dig into it. I should know since I've been spending almost 3 years making stuff like this work and work well for my company Ehavior.
You can use the DOM mutation events to monitor changes to the DOM tree. I guess this will give you what you are asking for. You should be aware though, that the mutation events are only available in newer browsers.
Hope this is still helpful to you, even though your question is a little dated :-)
What I want to achieve is as follows:
For example, there is a symbol which represents a table on a web page, a user can drag this element to any place on the web page, when the user looses the cursor, a dialogue box will pop up to ask the user to input values of attributes, for example,the number of columns, the number of rows, after the input, the corresponding table will come out at the place where the user chose. Of course, the symbol which represents a table is still at the original place. It is like a web version of dreamweaver. How to do this with Javascript?
If your question is how to start researching this feature I'd start with:
JQuery to get started with fancy yet easy javascript functionality
JQuery UI: Draggable, Dialog, etc
To actually develop the feature, if you don't know where to start, start small. Create a very basic web page with maybe just an icon and a button and then write some javascript to do something minor like display a dialog and show the result. Slowly start adding things like dragging something around, etc.
The JQuery UI stuff has lots of demos that you can start out with as a base to start customizing.
Warning: The first time I hit the JQuery UI Demos page I wasted at least a couple of days playing with all their cool stuff. It's so easy because the source is right there and you can also see it working in the browser on the demo page.
Did you look at the jQuery UI demonstration pages? The simple photo manager demo contains all the major pieces you'll need: Dragging an item, handling the drop event, doing something custom on drop. The revert demo may also be of interest
Begin by defining the requirements of your project. Break it down into smaller tasks and milestones. Then some learning and research on what javascript and frameworks like jquery can provide. Also check for existing solutions or components that you may be able to use and reduce your development efforts.