listMonth - I need a method that will display all days of the month - even if there are no events for a day - fullcalendar

FullCalendar 3 listMonth only lists days that have events.
I need to display all days of the month in the listMonth view, and display some text calculation for each end very day in the listMonth view.
How can I force the listMonth view to show all days of the month and pass a custom text to each day rendered?
I would like to use something like dayRender to pass the values to each day rendered using dayRender -
dayRender: function (date, cell){
cell.html("My custom text");
}
But dayRender does not seem to work with the listMonth view.

You can simply generate an array that contains all of the days in-between the selected date listMonth view, to force FullCalendar to show all calendar days:
$start_date = $this->input->post('start');// or however you are getting the start date
$end_date = $this->input->post('end');// or however you are getting the end date
$date_span_Array = array();// init
$temp_Array = array();// init
while(strtotime($start_date) <= strtotime($end_date)){
$temp_Array['title'] = 'Your custom title';
$temp_Array['start'] = $start_date;
$temp_Array['allDay'] = 'true';
$temp_Array['My_Custom_Value_Or_Text'] = 'My Text';
array_push($date_span_Array, $temp_Array);
$start_date = date ("Y-m-d", strtotime("+1 days", strtotime($start_date)));
}
// array of events that span all days between 2 dates for fullCalendar selected view
echo json_encode($date_span_Array);
You can add your own custom data, or actual event data in the creation of that array - as seen above - or afterwards during eventRender

Related

use tribe_get_start_date() as variable

Using Modern Tribe's Events Calendar Pro and their support suggested this avenue! I'm trying to get the event start date/time as a UNIX timestamp so I can set additional variables relative to the date—basically so that if an event is set to "expire" at a certain interval (using custom fields) I can output different stuff in my modified template. This is what I thought would work:
$unix_start = tribe_get_start_date();
$unix_1 = $unix_start - 3600; // 1 hour before
$unix_2 = $unix_start - 7200; // 2 hours before
$unix_6 = $unix_start - 21600; // 6 hours before
$unix_12 = $unix_start - 43200; // 12 hours before
$unix_24 = $unix_start - 86400; // 1 day before
When customizing my template I can output the UNIX timestamp with
<?php echo tribe_get_start_date($post->ID, false, 'U'); ?>
but I can't seem to get that value to use as a variable.

momentjs - strange behave with startOf and endOf

I'm trying to get the start and the end a a specific day.
Here's the code:
var newDay, newDayEnd, newDayStart;
if (newDay === '') {
newDay = moment();
}
newDay.subtract('day', 1);
newDayStart = newDay.startOf('day');
newDayEnd = newDay.endOf('day');
I'm trying to debug it, and I noticed that when if goes trough the values are correct, but as soon as it reaches newDay.endOf('day') it sets all the variable to the end of the specified day (23.59.59)
I'm using the above function on button click. Every time I click a button, it goes back one day (newDay.subtract('day', 1)) and I need to be able to get start and end of the new day (newDay variable)
Any help?
What am I doing wrong here? I don't understand.
Thanks
Moment objects are mutable, so you have to clone() them before modifying them.
As you can read from the endOf docs:
Mutates the original moment by setting it to the end of a unit of time.
Working example:
var newDay, newDayEnd, newDayStart;
newDay = moment().subtract(1, 'day');
newDayStart = newDay.clone().startOf('day');
newDayEnd = newDay.clone().endOf('day');
console.log(newDayStart.format(), newDayEnd.format());
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>

How to display popup message in the asp.net page only for certain days

I need to display pop up message on when loading the ASP.NET page. NOw I am using JQuery dialog to display information but the I need to show this dialog box only for certain days (max 30 days). How can I achieve this?
One way you can do all of it is client-side (subject of course to client side clock):
var start = new Date(2015,2, 1); //start date March 1, 2015, toggle date to test
var diff = Math.floor((new Date() - start)/86400000);
if(diff < 30) {
alert("Popped because it has only been " + diff + " days");
} else {
console && console.log("No alert, exceeded 30 days - it's been %o days", diff);
}
If you want server side/server time, then refer to DateTime and trigger the alert (e.g. inject the js, a variable in the js, etc.)
Hth.

FullCalendar end date is not inclusive

I'm using FullCalendar Beta2, and I set the AllDay flag to True.
The calendar still treats End Date as exclusive!
How can I make the End date inclusive?
Many thanks.
#ZooZ - According to the Beta 2 Upgrade docs, the end date is now exclusive:
all end dates are now exclusive. For example, if an all-day event ends
on a Thursday, the end date will be 00:00:00 on Friday. The 1.x
versions had some strange rules in regards to this. Things should be
much simpler now that exclusive end dates are used consistently
throughout the API. In addition, this behavior is more consistent with
other API's and formats, such as iCalendar.
Reference: http://arshaw.com/fullcalendar/wiki/Upgrading-to-2/
I would just add one to your end date calculation to work around this :)
You can hook into eventAfterAllRender and update a copy of the events and force the calendar to refresh.
In my example the modification only applies to events marked as allDay events (allDay:true). I only modifies a copy/clone of the events data so it only changes the displaying, not the actual data (I think - I need to test it better). I added the clone function but you can use something else if you like. I added the forceRendererToDisplay flag make it run only once.
Here is a fiddle: https://jsfiddle.net/a3q9c5tr/15/
function clone(obj) {
if (null == obj || "object" != typeof obj) return obj;
var copy = obj.constructor();
for (var attr in obj) {
if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
}
return copy;
}
$('#calendar1').fullCalendar({
forceRerenderToDisplay: true,
eventAfterAllRender: function(){
var startdatestr = this.options.events[0].start;
var enddatestr = this.options.events[0].end;
if(this.options.forceRerenderToDisplay == true){
var endDisplayDate = new Date(enddatestr);
endDisplayDate.setDate(endDisplayDate.getDate() + 1);
this.options.forceRerenderToDisplay = false;
var evs = clone(this.options.events);
for(var i in evs){
if(evs[i].allDay){
evs[0].end = new Date(endDisplayDate).toISOString().slice(0,10);
}
}
this.calendar.removeEvents();
this.calendar.addEventSource(evs);
this.calendar.rerenderEvents();
}
},
events:[
{start:'2016-04-03',end:'2016-04-05',title:'my event', allDay:true}
],
header: {
left: 'prev,next,today',
center: 'title',
right: 'month,agendaWeek,agendaDay',
allDay:true
}
});
I know this is kind of old now but with end dates being exclusive I found this workaround without having to add additional days.
first up is set display time to false this will make it so that the time is not shown on the events.
displayEventTime: false,
Then remove the allDay tag from your event and I used a foreach loop for my events which I pulled from DB.
$events=[
"start_date"=>"2020-01-01 00:00:00",
"end_date"=>"2020-01-04 00:00:00",
"title"=>"My Event",
]
events:[
<?php foreach ($events as $event):?>
<?php echo "{start:'".$event["start_date"]."',end:'".$event["end_date"]."',title:'".$event["title"]."'}},";?>
<?php endforeach;?>
],
Within the events part is where I have a foreach loop for the events. I will add
<?php $date = DateTime::createFromFormat("Y-m-d H:i:s", $event["end_date"]);
$date->setTime(0, 0);
// Add 23 hours
$date->add(new DateInterval('PT23H'));?>
so my final foreach loop looks like
events:[
<?php foreach ($events as $event):?>
<?php $date = DateTime::createFromFormat("Y-m-d H:i:s", $event["end_date"]);
$date->setTime(0, 0);
// Add 23 hours
$date->add(new DateInterval('PT23H'));?>
<?php echo "
{start:'".$event["start_date"]."',end:'".$date->format('Y-m-d H:i:s')."',
title:'".$event["title"]."'}},";?>
<?php endforeach;?>
],
so this has the foreach loop within the events. Then I create the date in a easy format to work with where I add the 23 hours and then echo out the date formatted within the event itself.
This then displays the end date as inclusive without having to adjust nextDayThreshold or having to add days before adding a date to your Database.

Can Sorting be performed on a Flex arrayCollection based on date/time values instead of normal text string / alpha?

I have a flex Array Collection created from a live XML data source and am trying to use my date/time string in the array to SORT the array prior to having the UI display the info / listing... currently the array is created and displays fine but the sorting by date / time is NOT working properly...
The routine works if I change the sort field (dataSortField.name) to 'name' (just alphanumeric text string based on filenames generated by my xml source), but if I use 'datemodified' as the sort field ( i.e. 7/24/2013 12:53:02 PM ) it doesn't sort it by date, just tries to sort alphabetically so the date order is not proper at all and for example it shows 1/10/2013 10:41:57 PM then instead of 2/1/2013 11:00:00 PM next it shows 10/10/2013 5:37:18 PM. So its using the date/time as a regular text string
// SORTING THE ARRAY BY DATE DESCENDING...
var dataSortField:SortField = new SortField();
dataSortField.name = "datemodified";
dataSortField.descending = false;
var arrayDataSort:Sort = new Sort();
arrayDataSort.fields = [dataSortField];
arr.sort = arrayDataSort;
arr.refresh();
Now if I CHANGE the dataSortField.name to "name" (which are alphanumeric filenames) it sorts a-z just fine... so How do I get it to sort by DATE where my array data looks like 7/24/2013 12:00:00 PM
Now the TIME part of the date isnt necessary for my sorting needs at all, so Im just looking to sort by date and beyond that the time doesnt matter for my needs but is hard coded in my xml data source.
I tried specifying
dataSortField.numeric = true;
but that didnt work either and while I can use it to specify string or numeric theres not a DATE option as I was expecting.
so my question, to clarify, is how do I make the SORT function acknowledge that I want to sort based on a series of date / time stamps in my array? Im using apache flex 4.9.1 / fb 4.6 premium).
I use this as a date compare function:
public static function genericSortCompareFunction_Date(obj1:Object, obj2:Object):int{
// * -1 if obj1 should appear before obj2 in ascending order.
// * 0 if obj1 = obj2.
// * 1 if obj1 should appear after obj2 in ascending order.
// if you have an XML Datasource; you'll have to do something here to get the
// date objects out of your XML and into value1 and value2
var value1:Date = obj1.dateField;
var value2:Date = obj2.dateField;
if(value1 == value2){
return 0;
}
if(value1 < value2){
return -1;
}
return 1;
}
To apply this to your code; you would do something like this:
var arrayDataSort:Sort = new Sort();
arrayDataSort.compareFunction = genericSortCompareFunction_Date;
arr.sort = arrayDataSort;
arr.refresh();

Resources