I am looking a for a plain clickable calendar widget to display on my site. I'm using html/css/bootstrap 5/jquery 3.6
I want the calendar days to be clickable as I'll show different content on another div based on different dates. My main goal is to ultimately show time slots available for booking a movie based on click for each day in the calendar.
I also want the calendar to have prev next buttons for different months.
But unfortunately till now I couldn't find one widget/library that is nice and working. Half don't work with bootstrap 5.
Could anyone recommend me a good calendar? A calendar widget not a datepicker.
You can try fullcalender.
Reference :- https://fullcalendar.io/
I am unable to implement two calendars at a same time on button click!.Is there any way ??I have got the references using Angular-JS. But I want the code to be in Angular 7 and on the click, both the two calendars should appear at a time so that I can choose start date in one calendar and end date in other.
click here for Screenshot
I always use ng bootstrap for those functionalities. Try it,
https://ng-bootstrap.github.io/#/components/datepicker/overview
(This might not be specific enough for StackOverflow, but I do have actual code samples. If you think it's too vague, let me know in a comment or vote to close.)
Background
I'm designing a date range picker for an internal web application. The way it works is that clicking on an input will pop up a list of pre-defined ranges, similar to how date range selection works on Google results:
Only if a user taps on Custom Range/Date will they get a calendar. There are panels inside the popup, sliding sideways, and they'll see one or two calendars (if range or if single date).
Problem
I'm looking for a date picker script that I can plug into my existing custom date picker class. I'd like to be able to call it from JS, and attach a callback to return the date. There will be no input HTML elements.
A perfect API in my mind would let me do something like this:
var beginDatePicker = new DatePicker({
default: beginDate,
callback: function(event){
// do stuff with returned date
}
})
... .appendChild( beginDatePicker.el.wrapper );
That way I could create a calendar, then use the callback to store the date and animate to second calendar, and then finally place the dates in the hidden inputs.
I can't find any open-source datepicker scripts that are modular though. They all require an input element, but I need to be able to create and destroy the calendars as I go.
Do anyone know of a library/script/class that works in the above manner?
Answer
It doesn't exist, anywhere I can find. The solution is just to take an open source option, fork it, strip out the pieces that I need, and use that.
When it comes to a booking calendar with a start and end-date, I think http://www.swiss.com (choose two Airports, click on search and you will see the date fields) has the perfect execution.
It basically works like this:
There are two input fields for outbound flight and return flight. If you click in either one of those, two calendar pop up. One under each input field.
They will stay open if you choose a date in the first calendar and only close if you select a date in the second calendar.
In the mobile view - where there isn't much space - only one calendar opens and the second opens when you choose a date from the first one.
I think this is a much better solution than having one large input field only and sort of a 3-month calendar to choose start and end, which seems to be the most used option for these kind of setups.
I figured I'd use the Jquery Datepicker: http://keith-wood.name/datepick.HTML as it seems it's powerful and easy to style. But I cannot find a way to keep the datepicker open and only close it when the second datepicker has a date chosen. The documentation seems not to mention it, and even with all the demos on the page, this particular problem isn't addressed.
If someone knows a solution to mentioned setup, I'd be really glad to get some pointers. I'd also switch to another calendar plugin if there is one in which this is easy to implement.
I'm looking for a way to input a 'schedule' for a task from a user of a web app I'm working on, and have it be used on multiple pages in my UI.
I was looking for something that would allow me to configure whether was manually triggered, run monthly/weekly/daily/hourly, etc. and then based on the configured frequency show subfields, like day of month for monthly + time of day, day of week for weekly + time of day, just time of day for daily, etc.
I was thinking I could just use multiple select fields, and use Javascript to hide/show the appropriate subfields when the selected frequency indicated I didn't need them. However, since I want to use this on multiple pages, I don't want to have to do a copy of a bunch of stuff between pages if there's a better way to do this.
Internally, it'll likely be converted to crontab format and use Spring to do the scheduling, but I don't want to display crontab format in a text box, because of its lack of user friendliness.
Anyone have any suggestions? I'm using Struts 2 for the UI, and am not using any Javascript library for anything. Not sure if this is the type of thing something like jQuery would make easy, or what.
Thanks.
jQuery is an option because it makes event handling consistent across browsers, however, writing a simple function that does it is across all browsers in a concise manner is fairly trivial too, so just for this widget I wouldn't recommend creating a dependency on jQuery.
Oh, and think of the input type as a widget or component with a decent public interface that you can just instantiate and embed in any page that needs it. Take a look at how most web calendaring solutions like Google Calendar achieve it, since they need to account for periodical events too, and still keep it simple for the end users. They have a solution to the UI problem of getting really complex recurring times such as:
Every 5 years on July 13
Every 2 months on the second Tuesday
Weekly on Tuesday, Wednesday
Every 4 days
in a simple manner for an end user. Here are a few examples:
Yearly repetition with a custom step size
alt text http://img17.imageshack.us/img17/8122/picture1be.png
Monthly repetition with a custom step size on a certain day of the month
alt text http://img706.imageshack.us/img706/8036/picture2so.png
Use a self-contained script file that contains the widget, let's say ScheduleWidget.js that you can reference on each page that needs it, or maybe it gets bundled in a minified/packed script, so all pages have access to it.
Keep the interface simple, so with minimal effort it can be inserted into any DOM element.
var widget = new ScheduleWidget();
var container = document.getElementById("scheduleContainer");
// getElement() returns the root DOM node of the dynamically constructed widget.
container.appendChild(widget.getElement());
When the ScheduleWidget object is instantiated, it sets up all event bindings so list selection, changes, etc. trigger a change in the logic/UI as needed.
OK, so I ended up using the Struts 2 component tag and just passing parameters to that to generate the appropriate code with different names. This worked the best for me since using this I was still able to nest Struts 2 tags and I'm not sure if I would have been able to do that by defining my own taglib.
I have been looking for an answer to this question too.
I do think Google calendar is a great example of how this can be done well, I think there is still a good opportunity for some kind of JQuery plugin or other javascript library.
For any given web applications it will be rare that a GUI will need to be able to create every entry in crontab. For instance, Google Calendar has an impressive array of scheduling options, but still does not support "every other minute from now on"...
For the web application that I am working with now, anything over "monthly" is too long, and anything under "daily" also does not work I only want to have the following options
daily options
daily
once every two, three or four days
weekly options
A set number of times per week (like:once, twice, etc)
weekly on a schedule (like: Tues, Thurs, and Sat)
monthly options
A set number of times per month (like: four, five, six)
monthly on a schedule (like: 1st, 7th, 13th, and 21st)
monthly on a weekly schedule (like: 1st Tuesday, 2nd Wednesday, Last Friday)
But it seems pretty obvious to me that what I want is merely a subset of a larger scheduling frequency system that includes hourly, 'minutely', yearly and yearly+ options
I will be exploring the javascript show/hide options further and will try to remember to extend this answer further when I get those done.