How can I get now hours, for time property messagesList in VueCLI? When i clicked button, this property is filled as time now. time property will be decimal part. Example : (23.14)
Data is there :
messagesList : [
{
id : 1,
content : "Benim mesajım",
opposite : false,
me : true,
time : 23.13,
},
{
id : 2,
content : "Karşı tarafın mesajı",
opposite : true,
me : false,
time : 23.13,
}
],
Code is there :
this.messagesList.push(
{
id : this.messagesList.length + 1,
content : this.inputText,
opposite : false,
me : true,
time : ?,
}
Just create a function to return the current time in the format you want and call it when adding in the message.
Here is the function:
function getTime() {
return parseFloat(`${new Date().getHours()}.${new Date().getMinutes()}`)
}
Here is the push to messageList:
this.messagesList.push({
id: this.messagesList.length + 1,
content: this.inputText,
opposite: false,
me: true,
time : getTime(),
}
I've got problem with my fullcalendar,but only on Mozilla Firefox browser.I want to add 2 events:
First on date 17.07 to 20.07 another on 18.07 to 22.07.
My browser in result show me first event on date 17.07 without end date and second correct result .I don't know why :/ in another browsers (chrome,opera) it's looks better.
$('.calendar').fullCalendar({
header: {
right: '',
center: '',
left: ''
},
firstDay: 1,
buttonIcons: {
prev: 'calendar__prev',
next: 'calendar__next'
},
theme: false,
selectable: true,
selectHelper: true,
editable: false,
events: [
],
viewRender: function (view) {
var calendarDate = $('.calendar').fullCalendar('getDate');
var calendarMonth = calendarDate.month();
//Set data attribute for header. This is used to switch header images using css
$('.calendar .fc-toolbar').attr('data-calendar-month', calendarMonth);
//Set title in page header
$('.content__title--calendar > h1').html(view.title);
},
eventClick: function (event, element) {
$('#edit-event input[value='+event.className+']').prop('checked', true);
$('#edit-event').modal('show');
$('.edit-event__id').val(event.id);
$('.title').val(event.title);
$('.description').val(event.description);
$('.start_date').val(event.start);
$('.stop_date').val(event.stop);
$('.user_full_name').val(event.author);
},
eventRender: function(event, element) {
startDate=event.start.toISOString().substring(0, 10);
stopDate=event.stop.substring(0, 10);
title = event.title + "<br />"+' [ '+startDate+' ]' + ' [ '+stopDate+' ] ';
element.popover({
title: title,
trigger: 'hover',
placement: 'auto',
container: 'body',
html: true
});
}
});
I've got my data from api and editing it on that function.
function getApiData(daysInMonth){
var api_url = $('input[name="apiUrl"]').val();
api_url = api_url+'/api/eventStart='+y+'-'+m+'-'+'01'+'&eventStop='+y+'-'+m+'-'+daysInMonth;
$.getJSON(api_url,function(result){
$.each(result.data,function(key,index){
bg = event_color(index.category_name)
if(index.category_name == "Holiday"){
title = index.category_name+' - '+index.user_name;
endDate=index.event_stop.substring(0, 10);
endTime=index.event_stop.substring(10, 19);
var datePlus1 = endDate.split('-');
datePlus1[2] = Number(datePlus1[2])+1;
if(datePlus1[2] > daysInMonth){
datePlus1[2] = '01';
datePlus1[1] = Number(datePlus1[1])+1;
if(datePlus1[1]<10){
end=datePlus1[0]+'-0'+datePlus1[1]+'-'+datePlus1[2];
}
else{
end=datePlus1[0]+'-'+datePlus1[1]+'-'+datePlus1[2];
}
}
else{
end=datePlus1[0]+'-'+datePlus1[1]+'-'+datePlus1[2];
}
$('.calendar').fullCalendar('renderEvent', {
id: index.id,
title: title,
start: index.event_start,
end: end,
stop: index.event_stop,
description:index.event_description,
author: index.user_full_name,
allDay: true,
className: bg,
}, true);
}
}
}
`
ok I solved the problem. Function must add '0' to value day if days < 10 becouse the date looks like this 2019-11-1 instead 2019-11-01.
i have a JSON string here:
[{"title":"Event","start":"2017-04-23T18:00:00","end":"2017-04-23T18:00:00"},{"title":"Event 2","start":"2017-04-23T11:15:00","end":"2017-04-23T11:15:00"},{"title":"Event 3","start":"2017-04-26T08:32:00","end":"2017-04-26T08:32:00"}]
how can I add those events in my calendar? (maybe using a loop?)
TRY THIS
$('#calendar').fullCalendar({
events: [
{
title : 'event1',
start : '2010-01-01'
},
{
title : 'event2',
start : '2010-01-05',
end : '2010-01-07'
},
{
title : 'event3',
start : '2010-01-09T12:30:00',
allDay : false // will make the time show
}
]
});
I am using FullCalendar.js in my website. I have set events from backend. I want to change look of the day which has an event. In other words I need some sort of class where I have "fc-day" and an event in it.
My code looks like and you see it on jsFiddle:
$('#calendar').fullCalendar({
events: [{
title: 'event1',
start: '2013-01-01'
}, {
title: 'event2',
start: '2013-12-05',
end: '2013-12-07'
}, {
title: 'event3',
start: '2013-12-15'
}]
})
You can use eventRender() property of Full Canendar.
This works for me with fullcalendar v2:
$('#calendar').fullCalendar({
events: [
{
title : 'event1',
start : '2014-04-01'
},
{
title : 'event2',
start : '2014-04-05',
},
{
title : 'event3',
start : '2014-04-15'
}
],
eventRender: function (event, element, view) {
// like that
var dateString = moment(event.start).format('YYYY-MM-DD');
$('#calendar').find('.fc-day-number[data-date="' + dateString + '"]').css('background-color', '#FAA732');
}
});
Note: You will need Moment library for this.
I could not find a desired property or method to use in the documentation of Fullcalendar.
I came up with a kind of a messy solution: adding a class by data-attributes:
function addClassByDate(date) {
var dataAttr = getDataAttr(date);
$("[data-date='" + dataAttr + "']").addClass("hasEvent");
}
function getDataAttr(date) {
return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate().toString().length === 2 ? date.getDate() : "0" + date.getDate());
};
It works fine for the settings, you've provided in your question.
The working example could be found here: http://jsfiddle.net/6NShN/9/
This is how I did it to give background color to each and every events.
JS FIDDLE DEMO
events: [
{
title: 'Test1',
start: new Date(2014, 2, 28, 12, 0),
end: new Date(2014, 2, 30, 12, 0),
backgroundColor: '#80ACED',
},
{
title: 'Test2',
start: new Date(2014, 2, 14, 3, 55),
end: new Date(2014, 2, 21, 12, 0),
backgroundColor: '#80ACED',
},
{
title: 'Test3',
start: new Date(2014, 2, 2, 12, 0),
end: new Date(2014, 2, 2, 12, 0),
backgroundColor: '#E82525',
}
]
Hope this helps.
Refer : http://arshaw.com/fullcalendar/docs/event_data/Event_Object/
Finally this is how it worked for me take a look at this
jsfiddle
$('#calendar').fullCalendar({
events: [
{
title : 'event1',
start : '2014-04-01'
},
{
title : 'event2',
start : '2014-04-05',
},
{
title : 'event3',
start : '2014-04-15'
}
],
eventRender: function (event, element, view) {
// like that
var dateString = $.fullCalendar.formatDate(event.start, 'yyyy-MM-dd');
view.element.find('.fc-day[data-date="' + dateString + '"]').css('background-color', '#FAA732');
}
});
weswesweswes is nearly correct view.element should be view.el
eventRender: function (event, element, view) {
var dateString = moment(event.start).format('YYYY-MM-DD');
view.el.find('.fc-day[data-date="' + dateString + '"]').addClass('fc-has-event');
}
None of these will work for >=v2.0, since fullCalendar started using moment.js for date formatting.
The following worked for me (passed to fullCalendar initialization function):
eventRender: function (event, element, view) {
var dateString = moment(event.start).format('YYYY-MM-DD');
view.element.find('.fc-day[data-date="' + dateString + '"]').addClass('fc-has-event');
}
You can add class on base of the fullcalender .fc-event class its not direct approach but its works.
Fiddle demo
$(document).ready(function (){
$(".fc-event").addClass("myclass");
});
Heres another Fiddle JS FIDDLE
Just by adding
textColor: 'white',
backgroundColor:'purple'
You can change the style
JS code:
$('#calendar').fullCalendar({
eventSources: [
// your event source
{
events: [
{
title : 'event1',
start : '2013-01-01'
},
{
title : 'event2',
start : '2013-12-05',
end : '2013-12-07'
},
{
title : 'event3',
start : '2013-12-15'
}],
textColor: 'white',
backgroundColor:'purple'
}
// any other event sources...
]
});
Fullcalendar v2, for agendaWeek view:
eventRender: function(event, element, view ){
if(view.name=='agendaWeek') {
var weekdays = new Array('sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat');
var eventweekday = $.fullCalendar.moment(event.start).format('d');
$('.fc-'+weekdays[eventweekday]).css('background-color', '#FFC');
}
},
Highlights all days with events.
Had this same issue and had found a bunch of solutions for older versions of FullCalendar (which seemed a bit hacky anyway). However, in v5 you can use eventDidMount and traverse up the DOM to the day cell.
JS Code:
eventDidMount: function(info) {
$(info.el).closest(".fc-daygrid-day").addClass("has-event");
}
Like others I'm having problems getting timed events to show up on the agendaWeek view. If you look at the events below, the first two are mine and show up as all day events. The last one is from the documentation and shows up in the correct time block. I've been staring at this so long I'm sure I'm missing something simple. Can anyone else see it?
$(document).ready(function() {
$("#calendar").fullCalendar({
defaultView: 'agendaWeek',
month:0,//current year assumed, first day of month assumed
date: 4,
height: 650,
header: {left: 'title',center:'agendaWeek'},
events: [
{
title : 'Fred',
start : '2010-01-04 08:00:00',
end : '2010-01-04 09:00:00',
allday : false
},
{
title : 'Betty',
start : '2010-01-06 08:00:00',
allday : false
},
{
title : 'event3',
start : '2010-01-05 12:30:00',
allDay : false // will make the time show
}
]
});
});
</script>
I fixed my problem as follows: Where you have allday you need allDay with a capital D.
Cheers!