JQuery Multiple Month Calendar View - javascript

I'm looking for suggestions/recommendations for a JQuery/Javascript calendar that can display multiple months at once (ie. previous month, current month, next month) like so:
(The attached mockup shows a 4-month view, but I think we'll actually be doing a 3-month view).
I DO NOT need a date picker. This is basically meant to display a user's schedule, with no ability to choose a specific month/year (beyond the side-scrolling). We'll pull events out of our database, hook them into the calendar somehow, and then on a day click/hover (or both), display additional information. Events will not be editable from this view - it is display only.
I've looked into general JQuery calendar plugins (Ion Calendar, CLNDR), but none seem to have the basic multiple-month functionality I need. Multi-lingual support (or the ability to add multi-lingual text) is also important to us. I was really hoping to find a ready-made plugin for this - can't be the first time someone's tried to do it!
In case it's any use/help, we use ColdFusion and MSSQL Server. We've also got JQuery 1.9.1, JQueryUI 1.10.0 and Bootstrap 2.3.2.
Edit: I did look at the JQuery UI datepicker, but it won't work for the functionality I need. I can't see any way to attach data to a specific date, or to be able to style certain days differently than others. I think the primary issue w/ it is that it's a datepicker, not a display calendar.

Like Sean said in the comments, the best option you have is probably FullCalendar. Although multi-month isn't supported out of the box, you might be able to achieve it by adding multiple calendars. Check out Issue #199, which describes a possible solution.
Regarding the multi-lingual problem: although it isn't multi-lingual by itself, FullCalendar does support modifying the days, months, etc. See Text/Time Customization. You could use ColdFusion's MonthAsString and DayOfWeekAsString functions to make it multi-lingual yourself.

Related

Multiple column using select with angularJS

I'm looking for a solution to pick up a date on mobile app (using Ionic framework). I would like the user click on a button and it triggers a selection of days, month, year, like on the picture below :
I'm not talking about multiple selections, but a combination a choice in the same select tag.
Any idea how to do it with JS/AngularJS ? I don't want to use JQuery.
Take a look at this. It has a list of all the input types and their behavior on mobile devices.
http://mobileinputtypes.com/
I found a partial solution for date. On the ionic website, there is a component which give the opportunity this behavior with date (http://ionicframework.com/html5-input-types/#date).
But I have still no idea how to deal with custom options using multiple columns.

Where to find a customizable full event / booking calendar?

I am looking for an event / booking calendar where in each cell / day is customizable (we can put whatever we like).
I've mostly seen calendars which allow you to input event as text. However, we need to put in four text fields and display it in a certain way for each cell.
Is there a plug-in (jquery or something else) that does this?
To achieve all of the functionality you're looking for you're going to need to make some modifications but this should do the trick.
Features
Select on a day-by-day basis and set criteria for each day
Unlimited amount of usages on your website or on your webpage.
Front End and Back End versions.
Each version can be completely customizable separately from CSS .
Auto resizable.
You can change the language.
Compatible with any server side script.
Please see: Booking Calendar Pro.
Also - it's not the 'prettiest' solution so you're probably going to need to take some time to dress it up. This is a plugin I've used in previous projects and was unable to find anything that offered similar or better functionality.

Selecting Data on JavaScript popup menu using Selenium

I am using Selenium to test out a web site. The web site contains a date field, which when clicked, opens a popup from wherein I can choose the date.
My issue is that I wish to select a particular date using the Selenium IDE or Selenese. I have tried various methods, but have not been able to get a correct solution or been able to resolve it, except by manually specifying a date to the field in Selenese script. I am using Java to implement the test case.
An example could be checked by going to any airlines site and clicking on the date field for departure. The popup which comes up, I wish to capture a date on that. This could be a future date or the present date.
You need to implement some code that will navigate calendar to the desired date. Depending on the calendar appearance it may be required to navigate to the next month or year, so you need the code that will determine what needs to be done and then emulate required events for Selenium.
We had the same task in our tests and we end up with either selecting today's date or by entering the date into the field directly. We also made a code that will allow to select any date on the calendar by we did this only because we needed to test the calendar widget and we were the authors of the widget so we knew how it was made. However it resulted in writing a lot of code
Selenium IDE is limited in its ability to handle javascript. I've worked around it at times
by putting custom links in that do customized GETs, but it's a hack.
You could look at Sahi, which can do it. I haven't tried it though.
http://sahi.co.in/w/

"AJAX" Calendar Widget that include Time Selection

Are there any existing AJAX/Javascript Date picker widgets/libraries that also allow you to select a time range? That is, after picking a date, an existing UI pops-up/becomes available to select a time range for the same.
I'm looking for example of things like this. UI Libraries that offer some form of date picking, followed by a step to pick a time range.
Yes, I know, a dozen different ways this could be implemented myself. I'm interesting in knowing what kind of preexisting libraries exist for this problem domain.
Here are some of the MANY choices:
Fancy Time Picker
NoGray Time Picker
This JQuery Plugin
Any+Time
Another JQuery Plugin
JQuery pt.TimeSelect
Clock Pick
Clock Picker
TimePickr
-
John Resig (The J IN JQuery) has this to say about it.
You'll need to combine a DATE Plugin with a Time Plugin, don't try to cram both into one dialog

What is the best calendar pop-up to populate a web form?

I want to be able to make an HTTP call updating some select boxes after a date is selected. I would like to be in control of updating the textbox so I know when there has been a "true" change (in the event the same date was selected). Ideally, I would call a function to pop-up the calendar and be able to evaluate the date before populating the text box...so I can do my validation before making a server call.
JQuery's datepicker is an extremely flexible tool. With the ability to attach handlers prior to opening or after date selection, themes, range selection and a variety of other incredibly useful options, I've found that it meets all my needs.
The fact that I sit next to one of its maintainers here at work is also fairly useful...
I've been playing with the jquery datePicker script - you should be able to do everything you need to with this.
YUI and ExtJs both have very nice looking and flexible calendars.
If you ever end up considering a JavaScript library/toolkit, Dijit, a widget system which layers on top of Dojo, has a calendar (Dijit calendar test page). I found it relatively simple to implement.
//Disclaimer: I'm in the middle of a love-hate relationship w/ Dojo at the moment, as I am in the process of learning and using it better.
I don't like the MS ASP.NET ajax, but their datepicker is superb. Otherwise, jQuery datepicker.
Check out the ASP.NET AJAX Calendar Extender or Steve Orr's drop down Calendar control.
I'm using the JSCalendar from Dynarch for a project I'm currently working on. It is LGPL licensed and really flexible (easy to customize to your needs). It has lots of features and looks good, too.
http://www.dynarch.com/projects/calendar/

Categories