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/
Related
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'm having a problem with TinyMCE 4.6. I've implemented a custom button that bumps the font size of selected text:
ed.addButton('finc', {
image: '/tinymce/plugins/zackel/button_images/big.png',
title: '+ font size',
id : 'finc',
onclick:function(editor,url) {
console.log("************ In finc: ", ed);
var delta;
var currentFontSize = new Number($(ed.selection.getNode()).css('font-size').replace('px',''));
console.log("************ finc: currentFontSize = " + currentFontSize);
var node = ed.selection.getNode(); // <======= LINE 565
var nodeName = node.nodeName; // for example 'DIV ' or 'P'
console.log("************ finc: node is ", node, "nodeName = " + nodeName);
if (currentFontSize >= 24) {
delta = 2;
}
else {
delta = 1;
}
currentFontSize = currentFontSize + delta;
console.log("************ finc: New font size = " + currentFontSize);
ed.formatter.register('incfont', {
inline : 'span',
styles : {'font-size' : currentFontSize + 'px'}
});
ed.formatter.apply('incfont');
console.log("********** finc: posting to val box " + currentFontSize);
$("div#px_val button").text(currentFontSize + 'px'); // show value in value box
}
});
If the text is initially in a P the button works fine but puts the text into a span inside the P when it's done. If I then just hit the button again it fails because the node it brings back on line 565 is still the P, which still has the original font size. So if he initial font size is 16, it goes to 17 but then every bump after that stays at 17. If I deselect the text after bumping it and reselect it, line 565 gets the span and the bumps work every time.
How can I force a reselection from my code, so 565 finds the span the second time instead of the P, without me deselecting and reselecting the text?
Thanks
It seems to me that I understand you problem, but i believe that the text re-selection should not happen every time you apply the formatting - just only in the case TinyMCE is adding the new SPAN.
Here is my proposal:
var delta;
var currentFontSize = new Number($(ed.selection.getNode()).css('font-size').replace('px',''));
var node = ed.selection.getNode();
var nodeName = node.nodeName; // for example 'DIV ' or 'P'
if (currentFontSize >= 24) {
delta = 2;
}
else {
delta = 1;
}
currentFontSize = currentFontSize + delta;
ed.formatter.register('incfont', {
inline : 'span',
styles : {'font-size' : currentFontSize + 'px'}
});
var cnt = ed.selection.getContent({format : 'html'});
var lenBefore = $(cnt).length;
ed.formatter.apply('incfont');
var cnt = ed.selection.getContent({format : 'html'});
var lenAfter = $(cnt).length;
if(lenAfter > lenBefore) {
var newText = ed.selection.selectedRange.startContainer;
var rng = ed.dom.createRng();
rng.setStart(newText, 0);
rng.setEnd(newText, newText.nodeValue.length);
ed.selection.setRng(rng);
ed.nodeChanged();
}
Explanation:
when you apply the formatter for the first time, TinyMCE is adding the SPAN and you will find the new selection inside the ed.selection.selectedRange.startContainer node of type text. This is the same as the first child node of type text of the newly inserted SPAN. For subsequent actions, there shall be no need to do any re-selection.
Moreover, IMHO i feel somehow unusual to change the font size in mouse click, i would prefer a standard plugin button which works only with a already existing text selection (but this is up to you):
Of course, the main question of the re-selection is solved, and the plugin will work repeatedly with subsequent mouse clicks also by using a plugin button.
Just in case, as said before, you may also check at the very top if there is any content:
var hasContent = ed.selection.getContent({format : 'text'}.length > 0);
if(!hasContent) return;
So i believe the whole stuff should do the job but anyway, i feel there is still room for some improvements, for example if you need also to reduce the font size, and thus you will also need to delete the already existing - but no longer necessary - SPAN which contain the formatting.
I'm trying to export the html part as a pdf file using html2canvas and jsPDF libraries. However, this functionality is working fine in IE and the contents that are available in the window scope is available in the exported pdf where the content inside the scroll bar is not available in chrome. The part has multiple rows where each row is iterated using angularjs ng-repeat and each row has customized css part. Each row should be exported with the applied css and the dynamic data that is available in the screen. Posting the codefor your reference,
Chrome Image
IE Image
Script Code:
$scope.exportFunctionViewData = function(){
html2canvas(document.getElementById('functionViewExport') , {
onrendered: function (canvas) {
var content = canvas.toDataURL('image/jpeg');
var imgWidth = 210;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
var doc = new jsPDF('p', 'mm');
var position = 0;
doc.addImage(content, 'JPEG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(content, 'JPEG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
doc.save($scope.title + '-FunctionView.pdf');
}
});
};
Rather than create events for Christmas and Easter and the like, I'd like to be able colour the date cells affected, and even perhaps have a grey translucent text for each event. Is there any easy way to do this in FullCalendar?
EDIT
It's been pointed out to me that fc-state-highlight is used to highlight fc-today, so perhaps a similar thing could be done, applying a css class to cells and defining it as "public holiday colour". A thought. The problem is how does one apply this class to the relevant dates such that it works within FC without breaking anything.
This could be done using eventAfterAllRender. Make a separate ajax call to find all of the holidays then change the color of the td. Example for month and holiday being June 1st, done with FC 2.0.1: http://jsfiddle.net/marcrazyness/C8jpm
eventAfterAllRender: function (view) {
//Use view.intervalStart and view.intervalEnd to find date range of holidays
//Make ajax call to find holidays in range.
var fourthOfJuly = moment('2014-07-04','YYYY-MM-DD');
var holidays = [fourthOfJuly];
var holidayMoment;
for(var i = 0; i < holidays.length; i++) {
holidayMoment = holidays[i];
if (view.name == 'month') {
$("td[data-date=" + holidayMoment.format('YYYY-MM-DD') + "]").addClass('holiday');
} else if (view.name =='agendaWeek') {
var classNames = $("th:contains(' " + holidayMoment.format('M/D') + "')").attr("class");
if (classNames != null) {
var classNamesArray = classNames.split(" ");
for(var i = 0; i < classNamesArray.length; i++) {
if(classNamesArray[i].indexOf('fc-col') > -1) {
$("td." + classNamesArray[i]).addClass('holiday');
break;
}
}
}
} else if (view.name == 'agendaDay') {
if(holidayMoment.format('YYYY-MM-DD') == $('#calendar').fullCalendar('getDate').format('YYYY-MM-DD')) {
$("td.fc-col0").addClass('holiday');
};
}
}
}
when doc ready, have a js function to select all TDs, with data-date the ones you want, and add CSS class to them. I don't know if it works, just an idea.
I am using the Jquery datepicker and everything is working fine and all styled how i want apart from any events i have in the database.
I would like any day that has an event to have a style using .my_class so instead of the default styling, it has a different colour. I would like this to apply for days that are in other months so if there's an event on the 1st of the next month, then style that.
I have used this to style the days of the other months to how i want but using something similar for the days with events doesn't work.
This works by changing the background colour of the other months
.ui-datepicker-other-month.ui-state-disabled:not(.my_class) span {
background: #fff;
color: #b4b3b3;
}
This doesn't work
.ui-datepicker-other-month.ui-state-disabled .my_class span {
background: #f00;
color: #b4b3b3;
}
This is the jquery for the datepicker and adding .my_class to any table cells that have an event
var selected_dates = new Array();
// gets all the events from the database using AJAX
selected_dates = getSelectedDates();
$('#datepicker').datepicker({
inline: true,
dateFormat: 'yy-m-d',
showOtherMonths: true,
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
beforeShowDay: function (date)
{
// gets the current month, day and year
// Attention: the month counting starts from 0 that's why you'll need to +1 to get the month right
var mm = date.getMonth() + 1,
dd = date.getDate(),
yy = date.getFullYear();
var dt = yy + "-" + mm + "-" + dd;
if(typeof selected_dates[dt] != 'undefined')
{
// puts a special class to the dates in which you have events, so that you could distinguish it from the other ones
// the "true" parameter is used to know which are the clickable dates
return [true, " my_class"];
}
return [false, ""];
},
onSelect: function(date)
{
// puts the event's title in the dialog box
$("#dialog").attr("title",selected_dates[date]['event_title']); // for the first time you open the popup
$("#dialog").dialog("option","title",selected_dates[date]['event_title']);
// puts the event's description text in the dialog box
$("#dialog").text(selected_dates[date]['event_description']);
// show the dialog box
$("#dialog" ).dialog();
}
});
Removed the space, maybe? Not sure what you rly mean tho..
.ui-datepicker-other-month.ui-state-disabled.my_class span {
background: #f00;
color: #b4b3b3;
}