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);
});
});
Related
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();
});
I would like to delete events on a fullcalendar jquery plugin by dragging them to a trash can image and dropping them in. There are several posts that discuss this action but I can't seem to get mine to work.
The trash can image is defined in the cshtml below:
<div class="well well-sm" id="deleteEventsDiv" style="text-align:center">
<label id="delete_events_lbl" style="display:block; text-align:center; font-size:medium; font-weight:bold">Delete Events</label>
<img src="~/Images/cal-trash.png">
<div class="note">
<strong>Note:</strong> Drag and drop events here to delete them
</div>
</div>
I can drag the event to the trash can but it reverts back to its original position then the eventDragStop event is triggered. Since it is not over the trash can, the rest of the code is not run. This is my fullcalendar code:
$('#edit_calendar').fullCalendar({
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
titleFormat: { month: 'MMMM' },
defaultView: 'month',
selectable: true,
selectHelper: true,
droppable: true,
drop: function (date, jsEvent, ui, resourceId) {
var memberName = $(this).data('event').title;
var memberID = $(this).attr('id').toString();
//Create Event - add to array
var newEvent = new Object();
newEvent = {
title: memberName,
id: memberID,
start: date.format(),
end: date.format(),
objectID: 0
};
eventsAdded.push(newEvent);
},
editable: true,
//The following constraints prevents the user from adding/updating/deleting events that are before the current date
//The end date is required. So, you can't add events over a year away from the current date
eventConstraint: {
start: moment().startOf('day'),
end: moment(moment().startOf('day'), 'MM-DD-YYY').add('days', 365)
},
selectConstraint: {
start: moment().startOf('day'),
end: moment(moment().startOf('day'), 'MM-DD-YYY').add('days', 365)
},
resizable: true,
dragRevertDuration: 0,
eventDragStop: function (event, jsEvent, ui, view) {
alert('event drag stopped...should be over trash can.');
// This condition makes it easier to test if the event is over the trash can using Jquery
if ($('div#deleteEventsDiv').is(':hover')) {
// Confirmation popup
$.SmartMessageBox({
title: "Delete Event?",
content: 'Are you sure you want to remove this event from the calender?',
buttons: '[No][Yes]'
}, function (ButtonPressed) {
if (ButtonPressed === "Yes") {
// You can change the URL and other details to your liking.
// On success a small box notification will fire
$.ajax({
url: '/events/' + event.id,
type: 'DELETE',
success: function (request) {
$.smallBox({
title: "Deleting Event",
content: "Event Deleted",
color: "#659265",
iconSmall: "fa fa-check fa-2x fadeInRight animated",
timeout: 4000
});
$('#edit_calendar').fullCalendar('removeEvents', event.id);
}
});
}
});
}
}
}); //end calendar initialization
How do I get the event from NOT returning to its original position when it is over the trash can?
i had same problem here. And i found a paleative solution.
I hope that it works for you too.
Open fullcalendar.js and edit:
dragRevertDuration: 500
to
dragRevertDuration: 0
I've created an angular directive for a tinyMce where on setup I add 2 handlers: for a blur event to hide a toolbar and for a click event to show it. Also I've created another directive where I have a textarea and a button. On button click I want a toolbar disappear and some action occur.
<body ng-app="MyApp">
<div ng-controller="MyCntrl">
<my-directive></my-directive>
</div>
<script>
var app = angular.module("MyApp", []);
app.controller("MyCntrl", function ($scope) {
}).directive("myDirective", function ( $compile) {
return {
restrict: 'E',
link: function (scope, elem) {
scope.click = function () {
console.log("click");
};
},
template: "<textarea data-tm ></textarea><button ng-click='click()' style='width:200px; height: 74px;' id='btn'>click</button>"
}
}).directive("tm", function ($timeout) {
return {
restrict: 'A',
link: function (scope, element) {
$timeout(function() {
tinymce.init({
mode: 'textareas',
setup: function (ed) {
ed.on('blur', function (e) {
ed.theme.panel.find("toolbar").hide();
console.log("blur");
});
ed.on('click', function (e) {
ed.theme.panel.find("toolbar").show();
});
}
});
});
}
}
});
</script>
Link to the code
If I click inside of a textarea and then on a button the following happens:
when the button's height is relatively small, for example 20px, only blur event occurs, but when the height is relatively big let's say 120px both blur and click events occur.
Could you tell me why is that? My guess is that in the first case the button is overlapped by something but I cannot find but what.
Thanks
Update: It seems like a problem with tinyMCE. I've remove angular and created just a tinyMce editor and a button underneath. The same problem: doesn't work when a button is too small and works either if a button is enough big or placed above the editor.
<script type="text/javascript">
tinymce.init({
mode: 'textareas',
setup: function (ed) {
ed.on('blur', function (e) {
ed.theme.panel.find("toolbar").hide();
console.log("blur");
});
ed.on('click', function (e) {
ed.theme.panel.find("toolbar").show();
});
}
});
function myFunction() {
console.log("click");
}
</script>
<textarea></textarea>
<button onclick="myFunction()" style="height:100px;">click</button>
Plunker
Try setting a little timeout, so the button will stay in it's position during the click event:
$timeout(function() { ed.theme.panel.find("toolbar").hide() }, 100);
See this plunker
When we click on the button a toolbar becomes hidden and the button moves up so when the mouse released it's not over the same object. Mousedown event could be used to solve the problem.
I have a dojo Enhanced Grid and I'm using formatter to display a button in one of the columns
{field: '_item', name: 'Update Data', formatter: dojo.hitch(context, this.getUpdateData), width: '165px' },
getUpdateData: function(rowItem) {
var button = new dijit.form.Button({
label: '<img src="/public/img/icon_texteditor.png" height="19px" width="19px"/>',
onClick: function(){
alert('hi');
}
});
return button;
}
This works well. The button is correctly rendered and when I click on it, it correctly shows the alert dialog. What I'd like to do is show some text/label and then the button in the grid cell. I've tried creating a div in the formatter and tried adding the button to the div:
getUpdateData: function(rowItem) {
var divNode = dojo.create("div", { innerHTML: rowItem.someText });
var button = new dijit.form.Button({
label: '<img src="/public/img/icon_texteditor.png" height="19px" width="19px"/>',
onClick: function(){
alert('hi');
}
});
button.placeAt(divNode);
return divNode.innerHTML;
}
Even though it renders it correctly (where the text is shown before the button in the table) , when I click on the button nothing happens. The onClick event handler is not called.
My question is: how can show the some text+ a button in a grid cell.
This worked for me:
getUpdateData: function(rowItem) {
var cpane = new dojox.layout.ContentPane (
content: rowItem.someText;
});
var button = new dijit.form.Button({
label: '<img src="/public/img/icon_texteditor.png" height="19px" width="19px"/>',
onClick: function(){
alert('hi');
}
});
button.placeAt (cpane);
return cpane;
}
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");
}
}
});