I want to use a fullcalendar to configure some data that applies to days of the week, but not tied to specific dates. So I want to show a calendar that doesn't include the actual dates in the header, and instead just shows the day of the week
So:
Mon, Tue, Wed, ...
instead of
Mon 2/1, Tue 2/2, Wed 2/3, ...
Use below common configuration for all views..
columnFormat: 'ddd', // Or any moment format as you require to show.
You also can give View-Specific-Options.
$('#calendar').fullCalendar({
views: {
basic: {
columnFormat: 'ddd'
},
agenda: {
columnFormat: 'ddd'
},
week: {
columnFormat: 'ddd'
},
day: {
columnFormat: 'ddd'
}
}
});
This works for me.
Related
I have a jtable jquery where I get the date from javahibernate pojo change to json and it gets auto change to this format Apr 7, 2020 12:00:00 AM.
In my jtable the display format for the field is set to 'dd-MMM-yyyy' I get the following error:
jTable WARNING: Given date is not properly formatted: Apr 7, 2020
12:00:00 AM
This only happens when the field type is date
start_date: {
title: 'Date',
type: 'date',
displayFormat:'dd-MMM-yyyy',
list: true,
width: '8%'
}
Can anyone help me to get the formatting fixed? I tried the same in pojo but it's not working.
Use moment jquery library.
This is what I have done to change the date format.
date: {
title: 'Date',
display: function(data) {
return moment(data.record.timestamp).format('YYYY-MM-DD');
},
},
I want fullCalendar to go to one a specifical day, but when I call
$('#calendarContainer').fullCalendar('gotoDate', date);
It only increment the view of the actual date by one.
My variable date is
var date =$.fullCalendar.moment(moment.utc(app.mCurrentStartDate).format('YYYY-MM-DD'));
My only way to make it work was to do
for (var i = 0; i < 100; i++)
{
$('#calendarContainer').fullCalendar('gotoDate', date);
}
But that is not possible.
My calendar use custom views
views: {
agendaThreeDay: {
type: 'agenda',
duration: { days: 3 },
buttonText: '3 day',
columnFormat: 'dddd D MMMM',
},
agendaTwoDay: {
type: 'agenda',
duration: { days: 2 },
buttonText: '2 day',
columnFormat: 'dddd D MMMM',
}
},
Do you know if this is the intented behaviour of gotoDate, or may be I use it the wrong way ?
Thanks.
I have an object
{
YHOO: [
{
date: Fri Apr 12 1996 00:00:00 GMT-0400 (EDT),
open: 25.25,
high: 43,
low: 24.5,
close: 33,
volume: 408720000,
adjClose: 1.38,
symbol: 'YHOO'
},
...
{
date: Thu Nov 14 2013 00:00:00 GMT-0500 (EST),
open: 35.07,
high: 35.89,
low: 34.76,
close: 35.69,
volume: 21368600,
adjClose: 35.69,
symbol: 'YHOO'
}
],
GOOGL: [
{
date: Thu Aug 19 2004 00:00:00 GMT-0400 (EDT),
open: 100,
high: 104.06,
low: 95.96,
close: 100.34,
volume: 22351900,
adjClose: 100.34,
symbol: 'GOOGL'
},
...
{
date: Thu Nov 14 2013 00:00:00 GMT-0500 (EST),
open: 1033.92,
high: 1039.75,
low: 1030.35,
close: 1035.23,
volume: 1166700,
adjClose: 1035.23,
symbol: 'GOOGL'
}
],
...
}
How do I alter this object so it becomes an array with
[
{
date: Fri Apr 12 1996 00:00:00 GMT-0400 (EDT),
YHOO: 33,
GOOG: 100.34
},
...
]
I know it can become a problem that they potentially not have the same dates, so I guess I should just say that one of the companies have the right dates, and then merge the other companies to these dates and omit those dates that are not in the already selected company.
I guess I should do something like
var data = [];
obj.YHOO.forEach((quote) => {
data.push({
date: quote.date,
YHOO: quote.price,
GOOG: ?
});
});
and instead of the question mark, I can loop through all the objects in array.GOOG and check if the date matches quote.date.
The big problem is that this seems quite computational heavy and the names of the companies can vary, so I cannot guarantee that YHOO and GOOG are present.
I have the following array that I am using to populate a select dropdown using ng-options but i am not able to set the selected option when the dropdown shows up.
Here is the array of data
{
'vehicle_year_id': 12,
'vehicle_color_id': 522,
'start_date': 'Thu Mar 26 2015 01:22:48 GMT+0000 (UTC)',
'end_date': 'Mon Sep 15 2014 14:37:15 GMT+0000 (UTC)',
'meta': {
'colors': [{ 'id': 522, 'caption': 'Green' }, { 'id': 523, 'caption': 'Blue' }],
'years': [{ 'id': 12, 'year': 2015 }, { 'id': 13, 'year': 2016 }]
},
'quantity': 8,
'duration': 10
},
and the partial code
<select ng-model="details.vehicle_color_id" ng-init="details.vehicle_color_id || details.meta.colors[0].id" class="form-control" ng-options= "color.id as color.caption for color in details.meta.colors track by color.id">
</select>
I can see the list of data in the dropdown list but the selected field doesn't show up at all. What is the proper way to use the option ?
Update:
I just made the following changes
<select ng-model="details.vehicle_color_id" ng-init="details.vehicle_color_id=(details.vehicle_color_id || details.meta.colors[0].id)" class="form-control" ng-options= "color.id as color.caption for color in details.meta.colors" ng-change="getValue($index)">
</select>
and used the getValue() to check the value of the model and it was showing the correct data and also the default value is being selected. I'm curious as to why it's happening this way.
Your ng-init should set value of ng-model scope variable
Markup
<select ng-model="details.vehicle_color_id"
ng-init="details.vehicle_color_id=(details.vehicle_color_id || details.meta.colors[0].id)"
class="form-control"
ng-options="color.id as color.caption for color in details.meta.colors"
ng-change="getValue($index)">
</select>
Working Plunkr
I'm working with FullCalendar and I'm using it for a business which has varying hours
Mon, Tue, Wed, Fri is 09:00 - 17:00.
Thu is 09:00 - 19:00.
businessHours: {
start: '09:00', // a start time (10am in this example)
end: '17:00', // an end time (6pm in this example)
dow: [ 1, 2, 3, 5]
// days of week. an array of zero-based day of week integers (0=Sunday)
// (Monday-Thursday in this example)
}
http://fullcalendar.io/docs/display/businessHours/
How can this be achieved?
To use variable hours for business hours, you need to use background events like this:
events:
[
{
id: 'available_hours',
start: '2015-1-13T8:00:00',
end: '2015-1-13T19:00:00',
rendering: 'background'
},
{
id: 'available_hours',
start: '2015-1-14T8:00:00',
end: '2015-1-14T17:00:00',
rendering: 'background'
},
{
id: 'work',
start: '2015-1-13T10:00:00',
end: '2015-1-13T16:00:00',
constraint: 'available_hours'
}
]
Notice in the last event it has the constraint filled in? This says that this can only be placed within an available hours slot. Using constraints, you can make flexible business hours.
For more information, see this link,
http://fullcalendar.io/docs/event_ui/eventConstraint/
Try this - Adding an event for each business hour, like so:
{
...
events: [
// business hours 1
{
className: 'fc-nonbusiness',
start: '09:00',
end: '17:00',
dow: [1, 2, 3, 4], // monday - thursday
rendering: 'inverse-background'
},
// business hours 2
{
className: 'fc-nonbusiness',
start: '10:00',
end: '15:00',
dow: [6], // saturday
rendering: 'inverse-background'
}],
...
}
NOTE : className and rendering are important options for this to work.
Good Luck.