Availability Calendar Cell Colour - css

I'm using the script below to crate an availability calendar for my website. The guests check-out on a Saturday morning and check-in on Saturday afternoon.
Availability Calendar
Therefore trying to adapt the code to resemble:
Just cant get the code to look right if two weeks booked together and also the first Unavaiolable cell is always highlighted as the last nth etc.

Added the relevant CSS as a previous question noted by #Manoj Kumar.
Due to the HTML being created via JS, checks had to be undertaken in JavaScript on NextStatus and PrevStatus to determine the CSS to use and whether Available or not.

Related

Resize option for Selected Dates across multiple months in FullCalendar

I just started using Full Calendar 4. Its awesome.
All things working great.
I am including a functionality to resize already selected dates across multiple months. For example, I select dates in April, and I want to continue my selection to 10th of May, But I think currently it is not possible.
I am trying to make it work like:
Click on next month, save current selected dates, by holding Ctrl or Shift keys, click on other dates and adding those dates to previous selected dates.
I went through new feature requests and issues, but this exact feature did not listed there.
Just curious to ask that if any other possible work around to this functionality or am I doing it right?

ISO basic script to constantly update a set number adding on more daily

Setting up a new website using CSS3 and I'm toying with a modal. For content, I'd want to put in a number (113) that would have an additional 113 added to the current number daily, resetting at January 1 each year.
For example... it's currently June 13. 18,532 would be the current number displayed, if my sleepy brain is right, and tomorrow it would be 18,654, and the day after, add on another 113, and so on. I'd like something that would do that daily without me updating it, the opposite of a countdown. I do NOT know how to script these things. Does something open source and user-friendly like this exist?

Fullcalendar full day overlap

I'm using Fullcalendar for a vacation stay reservation system. My problem is when a reservation is ending on a day and another one is starting that same day.
In Month view it shows both bars but one is above the other which makes the whole week taller.
What I would love to do is change the shape of the event bar in those cases to either be only half the day or better still to have a triangular shape on the end of each bar so it's clear that one event ends and the other one starts after the first ends.
In Agenda View there is a setting to let bars overlap (slotEventOverlap) but even that wouldn't work the way I want. I am doing this for a client so I would like to be able to do what he asks but I can't find anything here that addresses this particular issue.
Edit: I'm using version 1.64 and in fact it's the Full Year version that is a fork from the original. If there was a full year version of 2.x I would love to use that but I haven't seen any.

How can I select a time range when some times are not allowed?

I need some kind of control that will allow a user on a mobile device to select from available time ranges in a 24-hour period for a reservation manager.
For example, let's say the range starts at 8:00am. A user cannot rent the space between 10:00am and 12:00pm (noon), and cannot rent the space between 3:00pm and 6:00pm. Therefore, some valid rental ranges would be:
8:00am - 9:00am
8:00am - 10:00am
12:00pm - 3:00pm
1:00pm - 3:00pm
6:00pm - 7:00pm
You get the idea.
The problem is that I need to display to the user which range of times are already taken, and allow them to select a range of time from the available time slots. My boss suggested using a range slider (such as the jQuery one or the Telerik one), but none of the ones I've found seem to support this use-case.
I should note that my boss would really like to see this as a "timeline" for lack of a better word, where two slider bars represent the range and the slider line is colored red or green depending on whether that time is available.
Any suggestions? Keep in mind that this is on a mobile device using ASP.NET MVC3.
What you could do is to dynamically load the values using ajax when your control has focus and populate that control with the received values. In addition, you could use Remote attribute that would validate the selection against the available hours when a user makes a selection, just to be sure that another user did not make a reservation for the chosen time (so that you can avoid time clash).

Ubercart - Chosen Delivery Date to limit Shipping Options?

On the check out page I need users to choose a delivery date. Their needs to be multiple shipping options (that cost different amounts), but these are restricted based on what day you choose. Alternately if you choose a shipping method first, this will restrict what days you can choose for delivery.
One shipping option is ‘saturday’, and the delivery date must be a saturday.
Another shipping option is ‘next day’, the delivery must be the next day, and the order must be made before 2pm.
The final option is 'standard', which has no limitations except it cant be delivered on a saturday, and the delivery cant be the next day.
Also, I need to be able to restrict dates for delivery for all shipping options, as deliveries wont be made on bank holidays or the day after.
Im really struggling to do this so Id appreciate any pointers. If I can only achieve some of what I need that may be ok as a compromise.
Thanks
This sounds like a perfect case for using a calendar table to identify which dates are actually holidays. While I don't have specific experience with Ubercart, I've used calendar tables in a number of different solutions, and even wrote up a blog entry that details how to create and use a calendar table with a MySQL server. It's quite long, so rather than post the whole thing here, I'll just point you to the actual entry at http://www.brianshowalter.com/calendar_tables.

Resources