fullcalendar javascript issue - its not showing the events in IE? - javascript

On my team website: http://www.berzerkers.org, head over to the Schedule. The calendar is supposed to have a few events listed - it works fine in Firefox, Chrome and Safari - but not in IE...what is the issue? I don't know what to do. Any help would be greatly appreciated! :)

Wherever you data is being generated from, there's an empty array element at the end of the events array:
events: [{id: 1, title: "BT Big Game", start: new Date(2009, 7, 8, 8), end: new Date(2009, 7, 8)},{id: 2, title: "Team Meeting # Clubhouse", start: new Date(2009, 7, 2, 20), end: new Date(2009, 7, 2)},{id: 3, title: "Trip to Stingray", start: new Date(2009, 7, 7, 15), end: new Date(2009, 7, 7)},{id: 4, title: "Practice / Eazy's Going Away Party # Cousins SI", start: new Date(2009, 7, 16, 8), end: new Date(2009, 7, 16)},{id: 5, title: "Berzerkers Team Tryouts at NYCPB", start: new Date(2009, 7, 11, 20), end: new Date(2009, 7, 11)},]
Notice the ,] at the end.
This is causing IE to throw an error when it tries to parse it.

Related

Unable to reference json file in Data attribute but array list data works

I am incorporating cal-heatmap in my asp.net website and all works fine as long as i am referencing data through an array, initialized as variable above the init method, however things stop showing up as soon as i create new text file in visual studio and rename it as datas-years.json and reference it in 'data' attribute, please help me ?
below is the working code, manually entered data in array and referencing
var cal = new CalHeatMap();
var data = { "1420498800": 20, "1420585200": 40, "1420671600": 60, "1420758000": 1, "1421103600": 2, "1421190000": 90, "1421276400": 1, "1421362800": 1, "1421622000": 1, "1421708400": 1, "1422226800": 1, "1422313200": 1, "1422399600": 2, "1422486000": 1, "1422572400": 1, "1423695600": 3, "1424127600": 2, "1424214000": 1, "1424300400": 3, "1424386800": 1, "1424646000": 2, "1424732400": 1, "1424818800": 2, "1424905200": 2, "1424991600": 1, "1425337200": 1, "1425855600": 4, "1426201200": 2, "1426460400": 2, "1426546800": 1, "1426633200": 2, "1426719600": 1, "1426806000": 1, "1427065200": 1, "1427151600": 1, "1427238000": 2, "1427324400": 1, "1427670000": 2, "1428361200": 2, "1428447600": 2, "1428534000": 3, "1428620400": 3, "1428966000": 2, "1429138800": 2, "1429225200": 1, "1429484400": 2, "1429570800": 1, "1429657200": 2, "1429743600": 2, "1429830000": 3 };
cal.init({
data: data,
itemName: ["volunteer", "volunteers"],
start: new Date(2015, 0, 1, 1),
domain: "month",
subDomain: "day",
cellSize: 15,
subDomainTextFormat: "%d",
range: 12,
legend: [20, 40, 60, 80],
});
below is the referencing through separate file, all under visual studio
var cal = new CalHeatMap();
cal.init({
datatype:JSON,
data: "datas-years.json",
itemName: ["volunteer", "volunteers"],
start: new Date(2015, 0, 1, 1),
domain: "month",
subDomain: "day",
cellSize: 15,
subDomainTextFormat: "%d",
range: 12,
//highlight: new Date(2016, 1, 15),
legend: [20, 40, 60, 80],
});
I also would like to know what is the best way to convert the date to seconds format, when i impliment it in live, should i ensure that it is added in seconds format to json file or it can be just like 2/26/2015 ? and then convert it into seconds while borrowing from json file ? Please guide me, thank you
EDIT:
Data in the datas-years.json file in directory
[{
"1420498800":20,
"1420585200":40,
"1420671600":80,
"1421708400": 1,
"1422226800": 1,
"1422313200": 1,
"1422399600": 2,
"1422486000": 1
}]

Change in Highcharts values of x-axis with event onClick()

i would like a suggest...
i have Time series charts (without event to zoom it), my data is this:
data: [
[Date.UTC(2013, 5, 14), 0.7695],
[Date.UTC(2013, 5, 21), 0.7574],
[Date.UTC(2013, 5, 28), 0.7480],
[Date.UTC(2013, 6, 5), 0.7685],
[Date.UTC(2013, 6, 12), 0.7744],
[Date.UTC(2013, 6, 19), 0.7652],
[Date.UTC(2013, 6, 26), 0.7609],
[Date.UTC(2013, 7, 2), 0.7526],
[Date.UTC(2013, 7, 9), 0.7542],
[Date.UTC(2013, 7, 16), 0.7540],
[Date.UTC(2013, 7, 23), 0.7487],
[Date.UTC(2013, 7, 30), 0.7562],
[Date.UTC(2013, 8, 6), 0.7591],
[Date.UTC(2013, 8, 13), 0.7486],
[Date.UTC(2013, 8, 20), 0.7411],
[Date.UTC(2013, 8, 27), 0.7393]
]
These are the starts of weeks.
i enabled scrollbar of x-axis in my chart and i set range:
xAxis: {
type: 'datetime',
range: 28 * (24 * 3600000) // 4 weeks
},
in this way when the chart is ready, it show me last 4 week (and if i want to see other data, i will use the scrollbar)...
The problem is that the values of x-axis aren't my data :/
How i can to do ?
http://jsfiddle.net/k4ayprz4/
Besides i will insert a button under the chart with event onclick() that will reload the chart but with a new range
xAxis: {
type: 'datetime',
range: 3*(30 * (24 * 3600000)) // 3 months
},
the problem is that the values of x-axis in this case they should be names of months :/
Exist a way to do this ?
Thanks!
EDIT: I corrected the link jsfiddle and the array

Wijemo event calender bind to angular controller

I'm trying to bind the wijeval to an array of events in an angularjs Controller.
This is what if tried so far:
View:
<div ng-app="MyApp" ng-controller="MainController">
<wijevcal viewtype="week" eventsdata="{{events}}">
</wijevcal>
</div>
Controller:
var app = angular.module("MyApp", ["wijmo"]);
function MainController($scope) {
$scope.events = [{ id: "ev1", subject: "First event", start: new Date(2013, 5, 23, 15, 30), end: new Date(2013, 5, 23, 17, 35) },
{ id: "ev2", subject: "Second event", start: new Date(2013, 5, 23, 10, 30), end: new Date(2013, 5, 23, 11, 35) }];
}
The eventsdata binding is not working and if I create a new event it's stored in the local browser stroage.
I hope somebody can help me to get the binding work because the "documentation" I found is terrible
Link to documentation: http://wijmo.com/5/docs/topic/wijmo.angular.WjCalendar.Class.html
Ceddy
I believe you are using WijEvcal widget of Wijmo 3 and not WjCalendar of Wijmo 5. Here is correct code for using WijEvcal widget with AngularJS:
<wij-evcal id="evcal" time-interval="30" style="min-height: 300px" events-data="eventsData" selected-date="selectedDate">
</wij-evcal>
$scope.eventsData = [{ id: "appt1", subject: "app1", start: new Date(2015, 2, 23, 15, 30), end: new Date(2015, 2, 23, 17, 35) },
{ id: "appt2", subject: "app2", start: new Date(2015, 2, 13, 10, 30), end: new Date(2013, 2, 13, 11, 35) }
];
$scope.selectedDate = new Date(2015, 2, 23);
If you want to use Wijmo 5 control then you can refer to the following link:
http://demos.componentone.com/wijmo/5/Angular/Scheduler/Scheduler/#/

jQDateRangeSlider shows the wrong dates

I'm trying to integrate jQDateRangeSlider into my page.
The settings are as follows:
$("#slider").dateRangeSlider({
defaultValues:{
min: new Date(2014, 12, 5),
max: new Date(2015, 1, 26)
},
bounds: {
min: new Date(2014, 12, 5),
max: new Date(2015, 1, 26)
}
});
But it doesn't work: http://jsfiddle.net/oe8yk19n/
The dates shown are 2015-01-05 ~ 2015-02-26, which are completely different from those that I've actually entered... so weird.
Its not that the slider can't span that far, because the defaults span 2 years.
Super strange - any ideas?
$("#slider").dateRangeSlider({
bounds: {
min: new Date(2014, 11, 5),
max: new Date(2015, 0, 26)
},
defaultValues:{
min: new Date(2014, 11, 5),
max: new Date(2015, 0, 26)
}
});
Apparently it is because month counting starts at zero in javascript. Wat.

Reverse Event Order in Month View

Basically, if I have this:
events: [
{
title: 'First',
start: new Date(2014, 1, 24, 8),
end: new Date(2014, 2, 3, 8)
},
{
title: 'Second',
start: new Date(2014, 2, 3, 8),
end: new Date(2014, 2, 10, 8)
}
]
The First event displays below the Second Event.
Because this is a continuation of an event from the week above, I would like the First event to display above the Second event.
Any suggestions on how I can do this?

Categories