Render endDate as if they're inclusive - fullcalendar

I realise that by design it's intended that fullcalendar endDates are exclusive, but I'm looking for help to work with that given my constraints.
Data stored is simple UK date format:
YYYY-MM-DD
start: 2015-01-18
end: 2015-01-19
I'd like to keep the look of the plain all day events, rather than the timestamped style and I cant just +1 end date as what happens come the end of the month?
I've tried poking through the source js, to remove any -1 corrections in there. That works for my multiday events, but then makes one day events look like two day events.
Scenario. Users select a start date and end date (of their holidays)
So that would be perhaps monday to friday. Users dont select a time, just the date. Naturally they'll select the dates they want for holiday as inclusive.
Expected behaviour.
18/1/2015 - 18/1/2015 would highlight one full day.
18/1/2015 - 19/1/2015 would highlight two full days (inclusive days)
18/1/2015 - 20/1/2015 would highlight three full days (inclusive days)
etc..etc
Actual behaviour.
18/1/2015 - 18/1/2015 will highlight one full day.
18/1/2015 - 19/1/2015 will highlight one full day (exclusive endday)
18/1/2015 - 20/1/2015 will highlight two full days (exclusive endday)
Open to suggestions, fixes, workarounds, dirty hacks.
Thanks

It's possible I'm misunderstanding, but here's a possible solution.
Inside of eventDataTransform (which is called for every event), add a time to each start and end date. Something like
eventDataTransform: function(eventData){
eventData.start.startOf('day');
eventData.start.endOf('day');
}

Thanks to slicedtoad for the hint with eventDataTransform. I just had to find the correct way to actually add 1 to the end date. For any one curious (and I'm not sure I fully understand how it works), but a one day event is still a one day event even though it appears we're add one to the end?
events:
{
url: '<?php echo base_url();?>index.php/jsonfeed',
error: function()
{
alert('error');
},
},
eventDataTransform: function(eventData)
{
eventData.end = moment(eventData.end).add(1, 'days').format();
return eventData;
},

Related

Fullcalendar - Display an event with no end date

How do I go about displaying a long-running event with no end date? The data provided to me only shows when the event started but no end date because it's set to "Forever". It appears that when I only provide the start option, it only sets the event to show up on that day and not the following days.
I have a possible workaround for this, where if there is no end date from the event source, I always set the end date to 24 months from today, but that means if someone navigate the calendar past 24 months, the event would appear to have ended then. Would be nice to have something that will just keep going forever.

Fullcalendar - event shows wrong end date by one day

I have training events from database and their start and end dates are in this format "YYYY-MM-DD". For example is:
{
'title':'English Training',
'start':'2015-05-19',
'end':'2015-05-23'
}
But when it is rendered in calendar, it shows wrong end date
I tried adding 12hours on endDate (*just like the answer * here) , and yes it works but now I'm unable to extend the day for an event.
I want to fix this wrong end date issue without losing the capability to extend events. Do you know any solution or hacks?
Adding 12 hours on the endDate of your event won't make it an allDay event anymore, which is why you will loose the ability to extend your event in month view.
However, adding 1 day on the endDate will work perfectly as :
Your event will remain an allDay event (so it will remain extendable)
Your endDate will become 2015-05-24 (understood by FullCalendar as 2015-05-24T00:00:00) which means that your event will end at the very first minute of 2015-05-24 which is what you want.
To conclude : if you want an allDay event to end at midnight of day1, you have to set its endDate as day2 !

AngularJS datepicker change day item CSS

I'd like to use the http://angular-ui.github.io/bootstrap/#/datepicker.
Also, I have e.g. a the Events list for, let's say - 12th January
Is it possible to change e.g. the color of that day in the datepicker that I can see that for that day some events exist ?
the reason is, I'd like to give the opportunity for users to be aware whose days contains any Events
I've found that plugin https://github.com/eternicode/bootstrap-datepicker (in the demo, set the 'multidate' textbox value to true).
Moreover, that plugin offers the method to select many dates.
That's exactly I was looking for

Showing only ONE week (Opening hours, each week the same)

I would like to know if it is possible to show only one week, to use this calendar for showing opening hours of a shop.
So :
- I don't want to show the day dates (only the day names) : OK
- I don't want to colorize the current day : OK
- I want the calendar display always the same week => I don't know how to do that...
Have you got any idea ? Is it possible to do that ?
Thanks a lot !
If you use the "goToDate" method:
gotoDate
Moves the calendar to an arbitrary
year/month/date.
.fullCalendar( 'gotoDate', year [,
month, [ date ]] )
IMPORTANT: month is 0-based, meaning
January=0, February=1, etc.
you could add your shop opening hours on the calendar for a given date, and then just show the date. However, you could also just add them for the current week being shown - this would then allow you to change times, for example, bank holidays etc. Have an array of special dates and print normally if not one of those dates...
Since version 1.3 and 1.4 fullcalendar is now able to show week view:
http://arshaw.com/fullcalendar/docs/views/
http://arshaw.com/fullcalendar/docs/views/Available_Views/
Example:
http://arshaw.com/fullcalendar/views/agendaWeek/

Drop Down Date Delivery

I want to use a asp.net drop down to present the user a delivery date on checkout. What I'm not sure about is how to get the specific dates. What the user should see and be able to select in the drop down is the next Monday and Tuesday for the next two weeks. Any help would be appreciated.
thanks.
The simplest solution is to use the DateTime.DayOfWeek property (http://msdn.microsoft.com/en-us/library/system.datetime.dayofweek.aspx).
You start with getting today's date, or, if today is Monday and you can't deliver for two days, so the next delivery will be a week Monday, then start with tomorrow. I am not certain how you would handle if I order tomorrow could I get a delivery date for the next day, so I would need that clarified.
Get the day of the week, starting with either today or tomorrow, extracting it from a specific date as explained here:
http://msdn.microsoft.com/en-us/library/system.datetime.dayofweek.aspx
If it isn't Monday or Tues then just determine how many days you need to reach Monday or Tuesday, then add that number of days and get that date, and then just add seven and get the date.
I would prefer to let .NET determine the date of seven days from now, as you may change month or years.
That is the basic approach. If you get stuck when trying to implement it, I would suggest some code so we can help you determine where you got stuck.
There are other approaches, but this is probably the simplest to understand and implement.
Here's a pretty simple suggestion using a lot of LINQ:
private void LoadDeliveryDays(int period)
{
DateTime[] days = Enumerable.Range(1, period).Select(i => DateTime.Today.AddDays(i)).ToArray();
DropDownList1.DataSource = (from d in days where d.DayOfWeek == DayOfWeek.Monday | d.DayOfWeek == DayOfWeek.Tuesday select d.ToString("dddd dd-MM-yyyy")).ToArray();
DropDownList1.DataBind();
}
You probably want to change the d.ToString("dddd dd-MM-yyyy") and/or what value is actually used in the dropdown.

Resources