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
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
}]
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
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/#/
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.
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?