How do I attach a handler to the navigation buttons in FullCalendar v4? There is nothing specified in the official documentation.
One way to get what you need is to hide the default prev and next buttons and replace with your own custom buttons, for which there are click callbacks.
Please see https://codepen.io/ormasoftchile/pen/NVJeez for a working example.
customButtons: {
customprev: {
text: '<',
click: function() {
alert('clicked custom button 1!');
calendar.prev();
}
},
customnext: {
text: '>',
click: function() {
alert('clicked custom button 2!');
calendar.next();
}
}
}
Regards, Cristian
The only build-in method is the events: fn () callback. From the docs
FullCalendar will call this function whenever it needs new event data.
This is triggered when the user clicks prev/next or switches views.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid' ],
defaultView: 'dayGridMonth',
events: function (info) {
console.log(info);
}
});
calendar.render();
});
Related
Here is my iron-router route
this.route("video",{
path:'/video/:_id/:slug',
waitOn: function() {
Session.set("currentTitle",this.params.slug);
Session.set("currentVideoId",this.params._id);
console.log("waitOn");
},
onBeforeAction: function () {
},
action:function(){
console.log("action");
this.render();
},
data:function(){
console.log("data");
var video= Videos.findOne({_id: this.params._id});
if(video){
console.log("set the url");
Session.set("currentVideoURL",video.videourl);
Session.set("thumb",video.thumbs);
}
return {
video:video
};
}
});
After the template rendered event I'm calling some meteor method and processing the result
Template.video.rendered=function(){
console.log("render event");
var id=Session.get("currentVideoURL");
Meteor.call("getdata",id,function(e,d){
//processing
});
};
and in my html, I'm displaying some relative videos, on click of those videos I want to open the same page with this video data
but the video data in router is resetting and the rendered event is not firing(I didn't seen render event in console),
I want the page to open as we are coming from another url, I want all the events to be fired.
How to acheive this?
How do I implement this code from qTip for my fullcalendar Events? This is a modal feature of the qTip plugin and I wish to display this modal whenever I click an event in the calendar.
Here is the link for the tutorial:
http://craigsworks.com/projects/qtip/demos/effects/modal#
Here's an example on how to create the qtip when an event gets clicked. For perfomance reasons, the modal is created onclick for the specified event, not onpageload for all events.
$(document).ready(function() {
// watch for click on the event elements
$(document).on('click', '.fc-event', function(){
// qtip already is created for this event -> leave this function -> the modal gets opened
if($(this).data('qtip')) {
return;
}
// no qtip for this event created -> create it
$(this).qtip(
{
content: {
title: {
text: 'Modal qTip',
button: 'Close'
},
text: 'Heres an example of a rather bizarre use for qTip... a tooltip as a <b>modal dialog</b>! <br /><br />' +
'Much like the Boxy plugin, ' +
'but if you\'re already using tooltips on your page... <i>why not utilise qTip<i> as a modal dailog instead?'
},
position: {
target: $(document.body), // Position it via the document body...
corner: 'center' // ...at the center of the viewport
},
show: {
when: 'click', // Show it on click
solo: true // And hide all other tooltips
},
hide: false,
style: {
width: { max: 350 },
padding: '14px',
border: {
width: 9,
radius: 9,
color: '#666666'
},
name: 'light'
},
api: {
beforeShow: function()
{
// Fade in the modal "blanket" using the defined show speed
$('#qtip-blanket').fadeIn(this.options.show.effect.length);
},
beforeHide: function()
{
// Fade out the modal "blanket" using the defined hide speed
$('#qtip-blanket').fadeOut(this.options.hide.effect.length);
}
}
});
// show it after creation
$(this).qtip('toggle', true);
});
});
I have Fullcalendar opening in iframe. I have a script from dyn-web.com on parent page that resizes Iframe and this works fine most of the time:
function setIframeHeight(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument ? ifrm.contentDocument : ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px";
ifrm.style.height = getDocHeight( doc ) + 5+"px";
ifrm.style.visibility = 'visible';
}
When I open the calendar initially it resizes fine, but when I select another month that has a longer page render, it will not resize.
How can I invoke the resize on the parent window?
This is the start of my calendar but I cannot figure out the syntax to dynamically call resize. I have played with the height parameter, but it needs to be dynamic:
$('#calendar').fullCalendar({
month: <%=monthStart%>,
year: <%=yearStart%>,
eventSources:
[
{ url: <%=esource%>,
type: 'GET',
error: function() {
alert('there was an error while fetching events!');
}
},
You need to do something like this:
$('#calendar').fullCalendar({
month: <%=monthStart%>,
year: <%=yearStart%>,
eventSources:
[
{ url: <%=esource%>,
type: 'GET',
error: function() {
alert('there was an error while fetching events! ');
}
},
viewDisplay: function(view) {
parent.setIframeHeight(iframeId) ;
},
The viewDisplay handler is called every time the month/week/day view is changed. You can also use the windowResize handler to capture an event fired after the resize has actually taken place.
Hello this is the first time I'm using dialog. Here is my code:
$("#dialog").dialog({
autoOpen: false,
closeOnWscape: true,
show: "blind",
width: 800,
buttons: {
close: function () {
alert("close");
$(this).dialog("close");
}
}
});
$('p#pp').click(function () {
//jQuery('#fpoint').dialog();
//$("#dialog").load("Agrandir.aspx").dialog("open");
//var tid = $("#Label1").text.toString();
alert("open");
//$("#fpoint").dialog("open");
$("#dialog").load("Agrandir.aspx).dialog("open");
// window.open("Agrandir.aspx");
})
In the dialog will show a new page, in the page will show an execl. In the parent page there is an dropdownlist, when the button click this.session["id"] will get the value of the selected value, the Agrandir.aspx will use the session. Then click to open a dialog. But the dialog alway shows the same dialog which is created at the first time.
Place this script on your pages to prevent jQuery ajax calls from caching their responses.
$(function() {
$.ajaxSetup({ cache: false });
});
jquery.load() will cache responses without it.
See this for more information.
Not sure why but you are putting the close event in the buttons option list and you misspelled closeOnEscape. Try:
$("#dialog").dialog({
autoOpen: false,
closeOnEscape: true,
show: "blind",
width: 800,
buttons: {
"Close": function () {
alert("close");
$(this).dialog("close");
}
}
});
Perhaps someone out there can help me understand what's going on. I'm using jQuery UI dialog() to display html partials in my project. When a user clicks Add New it displays the add client form. However, when the user clicks on the Add or Cancel buttons in the dialog I get an error, "$(this).dialog is not a function". If I remove the open event and display a static form in the dialog the buttons the work fine.
ClientsController
public ActionResult ajaxCreateClient()
{
Client c = new Client();
AddToViewData(c); // adds some additional info about client
return PartialView("__ClientForm", c);
}
View: Contacts/Create
....
<p>
#Html.LabelForField(model => model.Client.Name) <!-- custom extension that I wrote -->
#Html.TextboxFor(model => model.Client.Name)
<a id="btnAddNew" href="javascript:void()">Add New</a>
</p>
....
<div id="addNew"></div>
jQuery
$(document).ready(function () {
$("#btnAddNew").click(function () {
$("#addNew").dialog("open");
});
$("#addNew").dialog({
autoOpen: false,
title: "Add Client",
width: 410,
modal: true,
resizable: false,
open: function(event, ui) {
$(this).load("#Url.Action("ajaxCreateClient", "Clients")");
},
buttons:
{
"Add": function () {
// validate() and do something
$(this).dialog("close");
},
"Cancel": function () {
// do something else
$(this).dialog("close");
}
}
});
});
Thanks!
Try like this:
$('#addNew').dialog('close');