I am fighting with the timezone option of fullCalendar plugin. It doesn't matter what I set: none, UTC or a specific location, everything is ignored by the plugin. All given times are shown as UTC+2 (Thats my location). What i do:
First creating some events according following code:
if(!newsCalendarEvent){
var newsCalendarEvent = [];
}
newsCalendarEvent["Event_1"] = {
events: [
{
title: 'my first news',
start: '2015-08-02T17:46:00Z',
end: '2015-08-10T17:46:00Z',
className: 'Event_1'
}
],
color: '',
textColor: ''
}
Then creating the calendar and looping through these events:
newsCalendar = $('#calendar').fullCalendar({
lang: 'de',
buttonIcons: false, // show the prev/next text
weekNumbers: true,
timezone : 'none',
timeFormat: 'H(:mm)'
})
for (var key in newsCalendarEvent) {
if (newsCalendarEvent.hasOwnProperty(key)) {
newsCalendar.fullCalendar( 'addEventSource', newsCalendarEvent[key] )
}
}
Solved. The problem had nothing to do with this plugin. It has been a qustion of timesetting in my php code.
Related
Goal: display data in calendar on days specified by a datepicker.
Problem: I am unable to assign data to specific dates- all calendar dates display the same data.
The calendar component is rendered by passing a function to its dateCellRender prop which generates the content to be displayed in the cell. The function passed to dateCellRender accepts a moment object as its sole argument, which is generated by the datepicker form. I inspected the Moment object and everything looks good there, i.e. calling moment.date() returns a number.
I tried to mimic the pattern in the documentation, but I keep running into the same issue.
What I'm really confused about is where the filtering is supposed to happen and what's going on behind the scenes. Is dateCellRender being called for every single cell in the calendar and displaying content only when a conditional is met?
Thanks.
The documentation example Calendar displays the list data on 8th, 10th, and 15th of every month. I'm putting it here for convenience. My code is below.
function getListData(value) {
let listData;
switch (value.date()) {
case 8:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'normal', content: 'This is usual event.' },
]; break;
case 10:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'normal', content: 'This is usual event.' },
{ type: 'error', content: 'This is error event.' },
]; break;
case 15:
listData = [
{ type: 'warning', content: 'This is warning event' },
{ type: 'normal', content: 'This is very long usual event。。....' },
{ type: 'error', content: 'This is error event 1.' },
{ type: 'error', content: 'This is error event 2.' },
{ type: 'error', content: 'This is error event 3.' },
{ type: 'error', content: 'This is error event 4.' },
]; break;
default:
}
return listData || [];
}
function dateCellRender(value) {
const listData = getListData(value);
return (
<ul className="events">
{
listData.map(item => (
<li key={item.content}>
<span className={`event-${item.type}`}>●</span>
{item.content}
</li>
))
}
</ul>
);
}
ReactDOM.render(
<Calendar dateCellRender={dateCellRender} />
, mountNode);
My exploratory code. "test" is displayed on every day of every month when the 3rd is chosen from datepicker.
testDate = () => {
console.log("in testDate", moment.date());
if (moment.date() === 3) {
return "foo";
};
render() {
return <Calendar dateCellRender={this.testDate} />
}
I expect 'foo' to be displayed on the third of every month when moment.date() === 3, but it's displayed instead on every date.
There are no error messages.
I am generating a Project Cumulative Flow Chart, which is based on the Project name that I fetch using a "find," however I can't get it working.
Here is the Problem:
1) The "Find" in my code is just fetching one kind of project name, "FE," however, I have a lot of other Project name such as FE, BE, VisualRF, etc. I am not sure what's going on
2) I return this to "storeConfig" inside the chart and then I want try to give "Name" to the "stateFieldName." This is not working! I don't see any graph at all.
Here is the code.
_chart2: function() {
var projectName = this.getContext().getProject()._refObjectName;
console.log("========");
console.log(projectName); <<<<<<<<<< This always prints one name'FE' (My project name are FE, BE, etc)
this.chart = {
xtype: 'rallychart',
storeType: 'Rally.data.lookback.SnapshotStore',
storeConfig: this._getStoreForChart2(),
calculatorType: 'Rally.example.CFDCalculator',
calculatorConfig: {
stateFieldName: this.getContext().getProject()._refObjectName, <<<<< I think usage is not fetching name of all projects
stateFieldValues: ['FE','BE','VisualRF']
},
width: 1000,
height: 600,
chartConfig: this._getChart2Config()
};
this.chartContainer.add(this.chart);
},
_getStoreForChart2: function() {
var obj1 = {
find: {
_TypeHierarchy: { '$in' : [ 'Defect' ] },
Children: null,
_ProjectHierarchy: this.getContext().getProject().ObjectID,
_ValidFrom: {'$gt': Rally.util.DateTime.toIsoString(Rally.util.DateTime.add(new Date(), 'day', -30)) },
State: "Open",
},
fetch: ['Severity','Project','ObjectID','FormattedID'],
hydrate: ['Severity','Project','ObjectID','FormattedID'],
sort: {
_ValidFrom: 1
},
context: this.getContext().getDataContext(),
limit: Infinity,
val: this.Name,
};
return obj1;
},
Though this should not matter but here is the code for the high chart function I am calling above
_getChart2Config: function() {
console.log("starting chart config");
return {
chart: {
zoomType: 'xy'
},
title: {
text: 'Chart2'
},
xAxis: {
tickmarkPlacement: 'on',
tickInterval: 20,
title: {
text: 'Date'
}
},
yAxis: [
{
title: {
text: 'Count'
}
}
],
plotOptions: {
series: {
marker: {
enabled: false
}
},
area: {
stacking: 'normal'
}
}
};
},
Down below you can see 'FE' getting printed:
Thanks a lot!
Kay
stateFieldName is the field which is used to calculate the CFD- usually ScheduleState or a custom dropdown field like KanbanState that captures your process. The stateFieldValues should be the values of that field (Defined, In-Progress, Accepted, Completed, etc.) This doesn't deal with projects at all. Definitely remember to include that field in your hydrate and fetch as well.
Using fullCalendar I am not able to get it to display in a different timezone. I am in pacific timezone, but I want to see the events as if I was on New York. I have also tried to pass the dates in with the offset (2014-11-20T13:33:00-0800). No matter what, they display as pacific time zone. What am I doing wrong?
$(document).ready(function () {
var dt = "2014-11-20";
var tz = "America/New_York";
//Call the fullCallendar method. You can replace the '#calendar' with the ID of the dom element where you want the calendar to go.
$('#calendar').fullCalendar({
header: {
//left: 'prev,next today',
left: '',
center: 'title',
right: ''
//right: 'month,agendaWeek,agendaDay'
},
editable: false,
defaultDate: dt,
timezone: tz,
defaultView: 'agendaDay',
allDaySlot: false,
events: [
//At run time, this APEX Repeat will reneder the array elements for the events array
{
title: "New Photo Shoot",
start: '2014-11-20T13:27:00',
end: '2014-11-20T14:27:00',
url: '',
allDay: false,
className: 'event-personal'
}, {
title: "GMB/Calendar Test 4 - Initial Photo Shoot",
start: '2014-11-20T11:00:00',
end: '2014-11-20T13:00:00',
url: '/00UJ00000081xpZMAQ',
allDay: false,
className: 'event-birthday'
}, {
title: "GMB/Calendar Test 4 - Initial Photo Shoot",
start: '2014-11-20T10:36:00',
end: '2014-11-20T12:36:00',
url: '/00UJ00000081xptMAA',
allDay: false,
className: 'event-birthday'
}, ]
});
});
I'm new to AngularJS, and I've been trying this for a while but really cant solve my problem.
When I was using ui-calendar for Angular, it has the
"TypeError: undefined is not a function"
problem, and the calendar wont even show up.
I solved it by wrapping the scope.calendar to $(scope.calendar) in the calendar.js.
I saw other saying its because the dependency, but when the page is running I can find the js sources in the page like the following:
<script src="/assets/angular.min.js?body=1"></script>
<script src="/assets/fullcalendar.js?body=1"></script>
<script src="/assets/calendar.js?body=1"></script>
<script src="/assets/angular-resource.min.js?body=1"></script>
So is this a problem of dependency or?
The second problem I have is loading events from rails-generated json into my calendar.
$scope.events are events I wrote in javescript, $scope.eventjson are events from json, and only the $scope.events are loading into the calendar
I have this code in my rails controller:
respond_to do |format|
format.json { render :json => {:title=> "event", :start => "2014-04-08 10:00:00" }.to_json }
end
And this is my Angular Controller:
controller('myCtrl', ['$log', '$scope','$q', '$resource', '$http'].concat(function($log, $scope, $q, $resource, $http){
var date, d, m, y, Event;
date = new Date();
d = date.getDate();
m = date.getMonth();
y = date.getFullYear();
Event = $resource("/calendar.json");
$scope.eventjson = Event.get();
$scope.eventjson.$promise.then(function(result){
$scope.eventjson = result;
});
$scope.events = [
{
title: 'All Day Event',
start: "2014-4-10 10:00:00",
allDay: false
}, {
title: 'All Day Event',
start: "2014-4-11 10:00:00",
allDay: false
}
];
$scope.uiConfig = {
calendar: {
height: 350,
editable: true,
header: {
left: 'month basicWeek basicDay agendaWeek agendaDay',
center: 'title',
right: 'today prev,next'
},
defaultView: 'agendaWeek',
dayClick: $scope.dayClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventClick: $scope.eventClick,
viewRender: $scope.renderView
}
};
$scope.eventSources = [$scope.events] //this one works
//$scope.eventSources = [$scope.events, $scope.eventjson] //got Error: $interpolate:interr
//$scope.eventSources = [$scope.eventjson] //this one shows nothing
}));
And my view:
<div ui-calendar="uiConfig.calendar" ng-model="eventSources">
I personally think its related with angular's promise, but I think that shouldn't be because there is $scope.watch in the calendar.js which means it should be watching $scope.eventSources changes. But when using break points I can see $scope.eventsources are not loading value for $scope.eventSources = [$scope.eventjson].
I've been working on this for two days, really appreciate if someone can give some help.
Using the Highstock charting library, Is there any way using the Highstock Range selector to display a custom YTD option?
Current when you use a type of 'ytd' in the range selector, it defaults to using the calendar year. For my use case (and i would have thought for financial institutions as well) i need to display data running from 1st April - 31st March as a 'ytd' option
It's probably not possible without hacking sources, find in Highstock:
else if (type === 'ytd') {
now = new Date(dataMax);
year = now.getFullYear();
newMin = rangeMin = mathMax(dataMin || 0, Date.UTC(year, 0, 1));
now = now.getTime();
newMax = mathMin(dataMax || now, now);
}
So as you can see, dates are hardcoded. You can change them to needed.
Here's how i've done it. Doesn't cope with looking at a previous Financial YTD (Which is a common use case for what i need it for), but i'm sure i could hack something up to do it.
JSFiddle here
$(function() {
var startDate = new Date("April 01, 2012 00:00:00");
var today = new Date();
var count = parseInt((today.getTime() - startDate)/(24*3600*1000)) -1;
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container'
},
rangeSelector : {
selected: 1,
buttonTheme: {
width:100
},
buttons: [{
type: 'ytd',
count: 1,
text: 'Calendar YTD'
},
{
type: 'day',
count: count,
text: 'Financial YTD'
}]
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
} );
});
});