Fullcalendar eventOverlap issue - ajax

I use fullCalendar 2.6 and I only want one allday event per day.
I use this :
eventOverlap: false
It works if I put an event and move it on a day which has already an event : they won't overlap.
But if I click on a day which has already an event, it overlaps and I get 2 events (or more) at the same date...
I use this too on my select function :
overlap: false
which does not do the trick..
What can I do ? any idea ?
And another issue is when I use ajax to send start/end dates, it only works when I click to add an event but not when I move it using arrows when I put my cursor on the edge of the event to change its size...
My code :
function renderCalendar() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay',
},
defaultDate: dateNow,
defaultView: 'month',
lang: 'fr',
height: 'auto',
editable: true,
allDaySlot: true,
weekNumbers: false,
timeFormat: 'H:mm',
slotEventOverlap: false,
weekends: true,
selectable: true,
selectHelper: true,
eventOverlap: false,
select: function(start, end) {
var title = 'Occupé';
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end,
allDay: true,
overlap: false,
color: '#bf0000',
textColor: '#ffffff',
};
$('#calendar').fullCalendar('renderEvent', eventData, true);
}
$('#calendar').fullCalendar('unselect');
alert(start);
alert(end);
}
});
Thanks for your help !

well.. selectOverlap set to "false" is the solution :)
for the second problem, the solution must be eventResizeStop but I didn't find it yet

Try this.
select: function(start, end) {
var title = 'Occupé';
var eventData;
var sameDayEvents = $('#calendar').fullCalendar( 'clientEvents' ,function(event) {
if (event.start.format('YYYY-mm-dd') == start.format('YYYY-mm-dd')) {
return true;
} else {
return false;
}
});
if (!sameDayEvents.length && title) {
eventData = {
title: title,
start: start,
end: end,
allDay: true,
overlap: false,
color: '#bf0000',
textColor: '#ffffff',
};
$('#calendar').fullCalendar('renderEvent', eventData, true);
}
$('#calendar').fullCalendar('unselect');
alert(start);
alert(end);
}

Related

TippyJS: Rendering a tippy with "interactive" set makes it (almost) invisble

I wanted to create a Tippy with a button in it:
let tippyActions = function() {
var tippys = document.querySelectorAll('*[id^="tippy"]');
tippys.forEach(tpy => tippy(tpy, {content: tippyContent(tpy),
placement: "left",
trigger: 'click',
allowHTML: true,
hideOnClick: false,
interactive: true,
//zIndex: 99999,}))
}
let tippyContent = function ( tpy) {
let buttonsDiv = document.createElement("div")
let btn1 = document.createElement("a")
btn1.href = `/go/${tpy.url}`
buttonsDiv.appendChild(btn1);
return buttonsDiv.innerHTML;
}
But as soon as I set the interactive flag to true the tippys body disappears:
After reading a bit I first thought I have a zIndex problem, but that apparently was not it.
Turns out that I missed to read a part of the FAQ section in the documentary, where it states that adding appendTo: document.body can solve the problem, which it did in my case:
let tippyActions = function() {
var tippys = document.querySelectorAll('*[id^="tippy"]');
tippys.forEach(tpy => tippy(tpy, {content: tippyContent(tpy),
placement: "left",
trigger: 'click',
allowHTML: true,
hideOnClick: false,
appendTo: document.body, // <---
interactive: true}))
}

How to make AOS not working with Slick slider?

I am using AOS to show html elements on scroll. It works well alone, but when I use it on the pages that contains Slick slider, the elements on which is AOS applied are not showing. Elements are hidden and if there is a lot scroll, it looks like the browser gives wrong information to AOS about current scrolling position and some elements are shown latter.
There is no specific code that makes this problems, any usage of slick on the same page with AOS makes AOS not working.
Did anyone solved this problem, I saw some pending questions on other websites and didn't find any solution?
You have to initiate Aos after the slider is initiate.
I think you have to take in account all the previous sliders.
// On init event
$('#productsCarousel').on('init', function(event, slick){
console.log('#productsCarousel init');
AOS.init({
easing: 'ease-out-back',
duration: 1000
});
});
$('#productsCarousel').slick({
centerMode: true,
centerPadding: '8%',
prevArrow: '<span class="slick-prev slick-btn"><span class="p-3"><span class="icon-prev"></span></span></span>',
nextArrow: '<span class="slick-next slick-btn"><span class="p-3"><span class="icon-next"></span></span></span>',
slidesToShow: 4,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
In my case, I put AOS refresh after slick initializations
$(window).on('load', function() {
AOS.init({
duration: 600,
once: true
});
$('.section-product-container').slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
});
$('.slide-container').slick({
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
speed: 300,
autoplay: true,
fade: true,
cssEase: 'linear',
customPaging : function(slider, i) {
var number = (i+1);
if ((i+1) < 10)
number = '0'+(i+1);
return '<a>'+ number +'</a>';
}
});
$('.section-customer-container').slick({
dots: true,
infinite: true,
slidesToShow: 5,
slidesToScroll: 5,
customPaging : function(slider, i) {
if ((i+1) < 10)
return '<a>0'+(i+1)+'</a>';
return '<a>'+ i +'</a>';
}
});
AOS.refresh();
});
$(document).ready(function () {
$('#hero-slider').on('init', function (e, slick) {
var$firstAnimatingElements = $('div.hero-slide:first-child').find('[data-animation]');
doAnimations($firstAnimatingElements);
});
$('#hero-slider').on('beforeChange', function (e, slick, currentSlide, nextSlide) {
var$animatingElements = $('div.hero-slide[data-slick-index="' + nextSlide + '"]').find('[data-animation]');
doAnimations($animatingElements);
});
$('#hero-slider').slick({
// autoplay: true,
// autoplaySpeed: 10000,
dots: true,
fade: true
});
functiondoAnimations(elements) {
varanimationEndEvents = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
elements.each(function () {
var$this = $(this);
var$animationDelay = $this.data('delay');
var$animationType = 'animated ' + $this.data('animation');
$this.css({
'animation-delay': $animationDelay,
'-webkit-animation-delay': $animationDelay
});
$this.addClass($animationType).one(animationEndEvents, function () {
$this.removeClass($animationType);
});
});
}
});
I finally found solution for this problem.
I managed to make animation work on first slide, but it didn't work on other slides, so I used slick events beforeChange and afterChange. In the first I removed, and in second I added the "aos-animate" class. I tried with AOS.refresh() and AOS.refreshHard() but it didn't help
This is my solution
$('#homeslider')
.on('beforeChange', function() {
$('.slider_title').removeClass("aos-animate");
$('.slider_subtitle').removeClass("aos-animate");
$('.small_cta').removeClass("aos-animate");
$('.big_cta').removeClass("aos-animate");
// AOS.refreshHard(); this didn't work
})
.on('afterChange', function(event, slick, currentSlide) {
$('.slider_title').addClass("aos-animate");
$('.slider_subtitle').addClass("aos-animate");
$('.small_cta').addClass("aos-animate");
$('.big_cta').addClass("aos-animate");
// AOS.refreshHard(); this didn't work
});
These classes are a part of each slide and each of them has class like this
<div class="slider_title" data-aos="zoom-in" data-aos-delay="300"></div>
And one more thing, I added AOS.init(); after slick initialization

Calendar doesn't render any events after $scope.splice(0) and $scope.push(event)

Hi I have problem with angular ui-calendar(angular wrapper for arshaw's fullcalendar).
In the first state I load the events immediately through a $http call. The calendar renders as expected.
In the second step, I load unapproved or approved events according to result of showNeschvaleneTerminyFunction(). After this load however, calendar renders, but does not have any events. I verified that the object on scope has events and is being updated correctly by echoing the object on the screen. However the calendar does not ever show the events.
Could you please help me, how can I properly load and reload events with ajax from php driven storage?
Here is my code
$scope.events = [];
$scope.getTermins = function(){
if($scope.showNeschvaleneTerminy == true){
$http.get(plutanium.ajaxurl + '?action=terminy_read').success(function (data, status, headers, config) {
$scope.events.splice(0, $scope.events.length);
$className = '';
for (var i = 0; i < data.length; i++) {
if (data[i].status == 0) {
$className = 'b-danger';
} else {
$className = 'b-info';
}
$scope.events.push({
id: data[i].id,
title: data[i].jmeno,
start: moment(data[i].date).toDate(),
end: moment(data[i].date).add('hours', 1).toDate(),
allDay: false,
className: ['b-l b-2x ' + $className]
});
}
});
}else{
$http.get(plutanium.ajaxurl + '?action=terminy_approved').success(function (data, status, headers, config) {
$scope.events.splice(0, $scope.events.length);
$className = '';
for (var i = 0; i < data.length; i++) {
$scope.events.push({
id: data[i].id,
title: data[i].jmeno,
start: moment(data[i].date).toDate(),
end: moment(data[i].date).add('hours', 1).toDate(),
allDay: false,
className: ['b-l b-2x b-info']
});
}
});
}
}
$scope.getTermins();
$scope.showNeschvaleneTerminyFunction = function () {
if ($scope.showNeschvaleneTerminy == false) {
$scope.showNeschvaleneTerminy = true
} else {
$scope.showNeschvaleneTerminy = false
}
$scope.getTermins();
}
/* config object */
$scope.uiConfig = {
calendar1:{
defaultView: 'agendaDay',
height: $window.innerHeight-200,
firstDay: 1,
firstHour: 7,
slotMinutes: 60,
defaultEventMinutes: 120,
minTime: 7,
maxTime: 15,
editable: true,
header:{
left: '',
center: 'title',
right: ''
},
dayClick: $scope.AgendaOnDayClick,
eventClick: $scope.alertOnEventClick,
eventDrop: $scope.alertOnDrop,
//eventResize: $scope.alertOnResize,
//eventMouseover: $scope.alertOnMouseOver,
},
calendar2: {
editable: true,
header: {
left: 'prev',
center: 'title',
right: 'next'
},
height: $window.innerHeight - 200,
firstDay: 1,
minTime: 7,
maxTime: 15,
dayClick: $scope.MonthOnDayClick,
eventClick: $scope.alertOnEventClick,
eventDrop: $scope.alertOnDrop,
//eventResize: $scope.alertOnResize,
//eventMouseover: $scope.alertOnMouseOver,
dayRender: $scope.setDay
},
calendar3: {
defaultView: 'agendaDay',
editable: true,
header: {
left: '',
center: 'title',
right: ''
},
height: $window.innerHeight - 200,
firstDay: 1,
firstHour: 7,
slotMinutes: 60,
defaultEventMinutes: 120,
minTime: 7,
maxTime: 15,
dayClick: $scope.AgendaOnDayClick,
eventClick: $scope.alertOnEventClick,
eventDrop: $scope.alertOnDrop,
//eventResize: $scope.alertOnResize,
//eventMouseover: $scope.alertOnMouseOver,
}
};
$scope.eventSources = [$scope.events];
So I didn't find any solution to my problem, that's why I disabled ui-calendar wrapper and now I am calling fullcalendar refreshevents function manually after loading events to array. It works now like a charm.

MVC3 AD Role based authorization for JQGrid Edit link

I am very new to JQgrid and mvc3 . I have a very basic jQgrid with edit functionality.
I want to disable edit link in jqgrid.navgrid for certain user (autheticated by AD) when JqGrid load and enable it for other user which has diffewrent roles.
I am able to restrict user from editing the grid data but that's not sufficient .I want user not to even see that editable link in JqGrid .
Here is the JqGrid which I have in my view( index.cshtml):
jQuery(document).ready(function () {
jQuery('#list').jqGrid({
colNames: ['id', 'CountryCode','Node','EligFactor'],
colModel: [
{ name: 'id', index: 'id', width: 150, height: 100, align: 'left' },
{ name: 'CountryCode', index: 'CountryCode', width: 150, align: 'left' },
{name: 'Node', index: 'Node', width: 150, height: 100, align: 'left' },
{name: 'EligFactor', index: 'EligFactor', width: 150, height: 100, align: 'left', editable: true, edittype: 'text' }
],
url: '#Url.Action("DynamicGridData")',
datatype: 'json',
mtype: 'POST',
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 15, 20, 25],
sortname: 'Id',
sortorder: "asc",
viewrecords: true,
imgpath: '',
caption: 'Eligibility Factor Grid',
imgpath: '/Content/images',
height: '210px'
}).navGrid('#pager', { edit: true, add: false, del: false, search: false, refresh: true },
{ url: '#Url.Action("EditRecord")', closeAfterEdit: true },
{},
{});
});
2, Here is the edit method in controller which is being used when user try to edit the grid data :
[Authorize(Roles=#"MyDomain\SecurityLists\User1")]
public ActionResult EditRecord(int id, string eligFactor)
{
bool success = false;
var context = new EligibilityFactorDataContext();
EligibilityControl eg = context.EligibilityControls.Single(p => p.id == id);
eg.EligFactor = Convert.ToSingle(eligFactor);
try
{
context.SubmitChanges();
success = true;
return Json(success);
}
catch (Exception e)
{
success = false;
return Json(success);
}
}
can someone pl. help me to achieve this . very appreciated !
var context = new EligibilityFactorDataContext();
var isAuth = true;
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
int totalRecords = context.EligibilityControls.Count();
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
var eligibilitycontrols = context.EligibilityControls.OrderBy(sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize);
var jsonData = new
{
total = totalPages,
page = page,
records = totalRecords,
userdata = isAuth,
rows = (
from eligibilitycontrol in eligibilitycontrols
select new
{
id = eligibilitycontrol.id,
cell = new string[] {
eligibilitycontrol.id.ToString() ,
eligibilitycontrol.CountryCode,
eligibilitycontrol.Node.ToString(),
Convert.ToSingle(eligibilitycontrol.EligFactor).ToString()}
}).ToArray()
};
return Json(jsonData);
}
Add a check if the user is authenticated and pass a bool in your viewmodel to your view if the user is authenticated or not and modify the nav pager based on this.
Ex
var userIsAuth = '#Model.UserIsAuth' == 'true';
jQuery('#list').jqGrid().navGrid('#pager', { edit: (userIsAuth ? true : false), add: false, del: false, search: false, refresh: true },
{ url: '#Url.Action("EditRecord")', closeAfterEdit: true },
{},
{});
So in the controller you need to define the UserData in a similar manner Ex
userdata = new {ExampleName = ExampleValue},
Then in your loadComplete: function()
var myPassedUserData = $(this).getGridParam('userData');
var ExampleVariable = myPassedUserData.ExampleName
Edit- Use Ternary operation to simplify the code. Possibly the url: property could also be disabled via the userIsAuth bool.

Extjs4 drag and drop zones error with IE,FF and Safari

I have multiple grids in a panel. The base grids have data in them and can be dragged and dropped between each other. All the grids in the panel should be able to drag and drop between each other. This works perfectly in chrome but not Firefox, IE, or Safari.
In IE,FF and Safari the grids with data in them will drag and drop between each other w/o problem. They will not between the empty grids. I tried adding data to the empty grids but that wasn't the problem. Firebug also errors when using it with Extjs so any bugs i get are from a different dev tool. I have reinstalled all of those browsers and that is not the answer either. Im stuck...
edit I found out in chrome the viewconfig for my dragdrop groups are set but it doesnt set in the other browsers
This is my base grid with data in it.
var rround = "panel-game-"+round;
var ss = Ext.create('Ext.grid.Panel', {
stateful: true,
id: "panel-game-"+round,
stateId: 'stateGrid',
autoScroll: false,
store: store,
columns: [
{
text : 'Teams',
flex : 1,
sortable : true,
dataIndex: 'team_name'
}
],
height: 100,
width: 150,
title: 'Game ' + round,
viewConfig: {
stripeRows: true,
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: [groups],
dropGroup: [groups]
},
listeners: {
drop: function(node, data, dropRec, dropPosition,record,store) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
var data = this.store.data.items;
var sdata = new Array();
data.each(function(e){
var bleh = {team_id: e.data.team_id, team_name:e.data.team_name};
sdata.push(bleh);
})
removeDupe(sdata,this.store);
}
}
}
});
This is my empty grid that should accept drops and should also drag when there is data in it.
var rCell = Ext.create('Ext.grid.Panel', {
stateful: true,
id: "panel-game-"+i+'-'+a,
stateId: 'stateGrid',
autoScroll: false,
store: rCellStore,
columns: [
{
text : 'Teams',
flex : 1,
sortable : true,
dataIndex: 'team_name'
}
],
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: [groups],
dropGroup: [groups]
},
listeners: {
beforedrop: function(node,data,overModel,dropPosition,eOpts){
console.log(node);
},
drop: function(node, data, dropRec, dropPosition, record) {
console.log("drop");
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('title') : ' on empty view';
var f = node.id.replace('-body','');
var newval = data.records[0].data;
if(f != undefined && f != ''){
var fstore = Ext.getCmp(f).getStore();
fstore.add(newval);
}
var data = this.store.data.items;
var sdata = new Array();
data.each(function(e){
var bleh = {team_id: e.data.team_id, team_name:e.data.team_name};
sdata.push(bleh);
})
removeDupe(sdata,this.store);
}
}
},
height: 100,
width: 150,
title: 'Game ',
viewConfig: {
stripeRows: true
}
});
It does not give a dropzone avaliable when i and trying to drag something over. It could be that but im not sure how to fix it.
The problem was the second viewConfig{stripeRows:true}. Chrome could figure it out but the other browsers were overwriting the first viewConfig with the second.

Resources