I am using Fullcalendar V5 with an Asp.net app.
I would like to add a refresh button to the fullcalendar toolbar. But instead of using text in the button, I would like to show an icon.
Is this possible?
Can an icon be used here?
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'dayGridMonth custom1',
center: 'title',
right: 'prevYear,prev,next,nextYear'
},
customButtons: {
custom1: {
text: 'custom 1',
icon: 'fa fa-recycle' //PUT ICON HERE? this is not working
click: function() {
alert('clicked custom button 1!');
}
},
Related
I try to use fullcalendar and show header nav buttons but not working
JS code
$(function(){
var calendarEl = $('#calendar');
var calendar = new FullCalendar.Calendar($(calendarEl)[0], {
initialView: 'dayGridMonth',
weekends: true,
navLinks: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'year,month,basicWeek,basicDay'
},
});
calendar.render();
});
Thank you for you help, it's for work...
fullcalendar header toolbar buttons not showing when application css and javascript tags are initialized on rails
Not working
https://fullcalendar.io/docs/v3/header
not working
FullCalendar header buttons missing
not working
You are using fullcalendar v5, and following old documentation, here is V5 DOCS
var calendar = new Calendar(calendarEl, {
headerToolbar: { center: 'dayGridMonth,timeGridWeek' }, // buttons for switching between views
});
I've been working on a project for some time now with meteor and fullcalendar. I've managed to display the events on the calendar, but they dont show as soon as I add them to my collection, not even after I refresh the page, they only show if I click to change the date from the calendar, this is the image show the calendar with no events, but in the console we can see the array of events
and this is after I click the "next" button and "back" on the top left.
Can anybody help me?? below is my code... thanks
Template.home.rendered = function(){
calendar = $('#calendar').fullCalendar({
events: function(start, end, timezone, callback){
var events = [];
calEvents = Times.find();
calEvents.forEach(function(evt) {
events.push({
id: evt._id,
title: evt.title,
start: evt.start,
end: evt.end
});
});
callback(events);
},
editable:false,
duration: '00:30',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
}).data().fullCalendar;
};
I have an Angular app that uses Full Calendar. I have a Full Calendar custom button that when a user clicks, should open a Angular Bootstrap Datepicker. I'm currently toggling CSS visibility but for some reason, the date picker doesn't display (after clicking the button) unless I resize the window.
My template:
<div id="cal-go-to-date" ng-style="goToDate.style">
<div uib-datepicker ng-model="goToDate.dt" class="well well-sm" datepicker-options="goToDate.options"></div>
</div>
My Angular controller:
$scope.uiConfig = {
calendar: {
// Other configuration
header: {
center: 'title'
},
customButtons: {
goToDate: {
text: 'go to date',
click: function(event) {
$scope.goToDate.style.visibility = 'visible';
}
}
},
// Other configuration
}
};
$scope.goToDate = {
dt: new Date(),
options: {
datepickerMode: 'month',
minMode: 'month'
},
style: {
'position': 'absolute',
'top': '224px',
'left': '76px',
'min-height': '290px',
'z-index': '99999',
'visibility': 'hidden'
}
};
I am calling $scope.goToDate.style.visibility = 'visible'; but that doesn't work unless I resize the window. What can I do to toggle the visibility of the picker?
Try wrapping the call with $applyAsync like:
$scope.$applyAsync(function(){ $scope.goToDate.style.visibility = 'visible'; });
since it looks like this happens outside of angularjs scope.
If its the problem resizing try using this function
$scope.windowResize = function () {
setTimeout("$(window).trigger('resize')",400);
};
and then call this function on the click of that button .
Hope it might help
I cannot figure out how to change the text of a customButton after it has been initialized. From the sample code below, the text is set to "custom!". But I want to change it dynamically? Is there a jQuery method call that I can achieve this?
$('#calendar').fullCalendar({
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
alert('clicked the custom button!');
}
}
},
header: {
left: 'prev,next today myCustomButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}
});
You're almost there already. The docs say that when defining custom buttons, the click parameter is:
a callback function that is called when the button is clicked. Accepts a single argument, a jqueryEvent.
So just use it, for example:
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
$(this).text('Updated text!');
}
}
},
You'll probably want to pass in some dynamic data, maybe about the currently displayed month or week or whatever. For example (this is just an example, maybe you don't need anything like this):
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
var view = $('#calendar').fullCalendar('getView');
$(this).text('First visible day is ' + view.start.format('YYYY-MM-DD'));
}
}
},
In vanilla JS :
customButtons: {
showMore: {
text: moreHoursTranslation,
click: function (e) {
if (this.classList.contains("more-hours")) {
this.classList.remove("more-hours");
this.innerText = moreHoursTranslation;
this.closest(".fc").querySelector(".fc-view").style.height =
"200px";
this.closest(".fc").querySelector(".fc-view").style.overflow =
"auto";
return;
}
this.classList.add("more-hours");
this.innerText = lessHoursTranslation;
this.closest(".fc").querySelector(".fc-view").style.height = "auto";
this.closest(".fc").querySelector(".fc-view").style.overflow = "auto";
},
},
},
You can use following code to add button with event binding.
$('.fc-toolbar .fc-left').prepend(
$('<button type="button" class="fc-button fc-state-default fc-corner-left fc-corner-right">+ room</button>')
.on('click', function() {
var title = prompt('Room name');
if (title) {
$('#calendar').fullCalendar(
'addResource',
{ title: title },
true // scroll to the new resource?
);
}
})
);
Reference From Bellow Link.
Link
I've added custom toolbar button for tinymce with image, I want to add a class to that. I've tried of adding class parameter but didnt work for me.
pls advice
tinyMCE.PluginManager.add('subBtn', function(editor, url) {
editor.addButton('subBtn', {
class :'buttonClas',
image: icon-path,
icon: true,
tooltip: tooltip,
onclick: function() {
// Open window
editor.windowManager.open({
title: 'PTION',
body: [
{type: 'textbox',value: subBtin, name: 'title', label: 'subBtn'}
],
onsubmit: function(e) {
}
});
}
});
});
Try "classes" instead of "class" - you can add more than one, divided by spaces.