I have FullCalendar up and running on my site with the events being pulled from google calendars. It all works great, except when I switch to the yearList view. Yes it shows all of the events properly, but I was wondering if there is a way to have it focus on the closest event to the current date
i.e. it's July and when you switch to listYear view it starts at January.
I don't want to disable past events or anything like that.
So I guess the question is: Can you get the closest event to the current date, and have the list scrollTop to that event?
Any help would be greatly appreciated!
in action:
www.pvband.org/schedule/
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,listYear'
},
displayEventTime: true,
displayEventEnd: true,
//removed google api key and cal events for this snipet
eventClick: function(event) {
if (event.url) {
var fancyContent = ('<div><div class="eventDetailsHeader">Event Details</div> <div class="eventDetails"> <label><b>Event: </b></label>' + event.title + '<br>' + '<label><b>Date: </b></label>' + event.start.format('ddd, MMM DD, YYYY') + '<br>' + '<label><b>Start Time: </b></label>' + event.start.format('h:mm a') + '<br>' + '<label><b>End Time: </b></label>' + event.end.format('h:mm a') + '<br>' + '<label><b>Location: </b></label>' + event.location + '<br>' + '</div></div>');
$.fancybox.open({
src : fancyContent,
type : 'html',
})
return false;
}
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
Related
hello someone can help me with this ?
I what to change my process indicator from SAPUI5 to make something like this
enter image description here
the idea is show how much percent are favor about something and how much percent is against
thanks
you can create a custom control like this or added some code to the onAfterRendering event.
ProgressIndicator.extend("ProgressIndicatorEx", {
renderer: {},
onAfterRendering: function() {
if (ProgressIndicator.prototype.onAfterRendering) {
ProgressIndicator.prototype.onAfterRendering.apply(this, arguments);
}
var percentValue = this.getPercentValue();
this.$().find("#" + this.getId() + "-bar").html('<span id="' + this.getId() + '-textLeft" class="sapMPIText sapMPITextRight" style="color: #FFF; margin-right:8px">' + percentValue + '%</span>');
var rightBar = this.$().find("#" + this.getId() + "-remainingBar");
rightBar.html('<span id="' + this.getId() + '-textRight" class="sapMPIText sapMPITextRight" style="color: #FFF">' + (100 - percentValue) + '%</span>');
rightBar.css("background-color", "#c00")
rightBar.css("border-color", "#c00")
}
demo: https://jsbin.com/yawiqam/edit?js,output
I'm trying to modify the tree control example so that it nests ul's inside an li, this is my template:
template:
'<li>' +
'{{if folders && folders.length}}' +
'<span class="toggle">{^{:expanded ? "-" : "+"}}</span>' +
'{{else}}' +
'<span class="spacer">•</span>' +
'{{/if}}' +
'{{>name}}' +
'{^{if expanded}}' +
'<ul>' +
'{{for folders}}' +
'{^{tree/}}' +
'{{/for}}' +
'</ul>' +
'{{/if}}' +
'</li>',
And my tag is:
{^{tree _data/}}
This produces the desired html - but also raises a second click event which subsequently collapses the just expanded list items?
Any help appreciated, thanks.
This is because you have combined two <li>s into one, and the event bubbling of the click event is now triggering other toggle events on tree nodes higher up. (Before, the self.contents("li").first() selector was ensuring that a bubble click event from deeper down was not captured. But now deeper nodes are under the same li as the parent nodes.)
So one fix is to prevent bubbling. Return false from the handler (or call event.stopPropagation()).
self.contents("li")
.on("click", ".toggle", function() {
self.toggle();
return false;
});
Another is to associate the click event with the span, not the li, so it doesn't find multiple .toggle targets:
var self = this;
self.contents("li").find(".toggle")
.on("click", function() {
self.toggle();
});
Another alternative is to use the {{on}} tag binding for the click handler. In fact the whole implementation is then simpler:
$.views.tags({
tree: {
template: '<li>' +
'{{if folders && folders.length}}' +
'<span data-link="{on ~tag.toggle} {:expanded ? \'-\' : \'+\'}" class="toggle"></span>' +
'{{else}}' +
'<span class="spacer">•</span>' +
'{{/if}}' +
'{{>name}}' +
'{^{if expanded}}' +
'<ul>' +
'{{for folders}}' +
'{{tree/}}' +
'{{/for}}' +
'</ul>' +
'{{/if}}' +
'</li>',
//METHODS
toggle: function() {
var data = this.tagCtx.view.data;
$.observable(data).setProperty("expanded", !data.expanded);
}
}
});
I will probably switch the sample to take this approach...
I need to show an image in cells based on the event feed. If any data available for particular date, then an image will be displayed in center of cell. If not it should display default image in center of cell. I tried with following code. But I was successful to place image but not center/where the event data is replaced. And also I the "cross" image should be visible only for validRange
Required format is shown in image 3. Please help. Thanks.
img = "images/cross.png";
$('#calendar').fullCalendar({
contentHeight: 380,
weekNumbers: false,
fixedWeekCount: false,
eventLimit: true, // allow "more" link when too many events
events: feeder,
businessHours: true,
aspectRatio: 1,
defaultView: 'month',
showNonCurrentDates: false,
validRange: {
start: '2018-08-01',
end: moment()
},
eventRender: function (event, eventElement, view) {
if (event.imageurl) {
eventElement.find("div.fc-content").html("<img src='" + event.imageurl + "' width='25' height='28'>");
} else {
eventElement.html("<img src='" + img + "' width='25' height='28'>");
}
},
dayRender: function (date, cell) {
cell.html("<img src='" + img + "' width='15' height='20'>");
}});
I am using FullCalendar and iCalendar2FullCalendar to feed in the .ICS files from our various iCloud accounts. This works great at rendering all the events from our shared calendars.
I’m making a small display and am using the ‘agendaDay’ view. I like that all day events sit at the top and can see any scheduling conflicts below.
However, I have some events that run over a number of days, for example from 1700hrs Friday to 1900hrs Sunday my daughter will be with me. On the agendaDay view this will show as a solid bar throughout all of saturday across each hour, and I’m wondering if there is a way to render events over a certain duration as an all day event instead?
I’ve played with the eventRender callback but whilst I’m able to change the event properties the event still renders as if the changes were never made.
Here’s my code, in this revision i’ve applied a fixed date in the hope it would draw as an all day event but no luck!:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: '',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
editable: false,
aspectRatio: 0.77,
eventRender: function(event, element, view) {
var dur = event.end - event.start; //event duration
var days = dur / 86400000;
if(days > 1 || event.end == null){ // needs altering to show as all day event.
console.log('long event - all day?' + event.allDay);
event.allDay = true;
console.log(event.title + ' - all day?' + event.allDay);
console.log(event.title + ' - starts:' + EpochToDate(event.start));
console.log(event.title + ' - ends:' + EpochToDate(event.end));
event.start = '2018-07-23T10:00:00';
event.end = '2018-07-24T10:00:00';
console.log (event);
}
}
});
})
Here’s what I used in the end, thanks to #ADyson.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: '',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
editable: false,
aspectRatio: 0.77,
eventDataTransform: function (eventData) {
var dur = eventData.end - eventData.start; //total event duration
if(dur >= 18000000 || eventData.end == null){ // 5 hours
eventData.allDay = true;
//eventData.end needs ammending to 00:00:00 of the next morning
if (dur > 86400000) {
var m = moment(eventData.end);
var roundDown = m.startOf('day');
var day2 = moment(roundDown).add(1, 'days')
eventData.end = day2.toString();
}
}
return(eventData);
},
});
I would like to re-size the cell height in the monthly view on the fullcallendar wordpress plugin.
I know it is affected my the aspect ration, but i would like to customize it to be half of the width of the cell.
Please help,
You can resize the FullCalendar by writing the CSS for the Calendar Element. Take a look at the code below.
HTML:
<div id='myCalendar'></div>
jQuery:
$(document).ready(function () {
// Code for adding Dynamic Event. Ignore this code part
var myEvents = [];
var date = new Date();
var y = date.getFullYear();
var length = 12;
for (var month = 1; month < length; month++) {
var month = (month <= 9) ? '0' + month : month;
var startdate = y + '-' + month + '-10';
var enddate = y + '-' + month + '-15';
myEvents.push({
title: 'event',
start: startdate,
end: enddate,
allDay: true
});
}
$('#myCalendar').fullCalendar({events: myEvents});
});
CSS:
#myCalendar{margin-top:50px;width:300px;}
Demo URL: http://jsfiddle.net/ramsunvtech/pBke3/