Is it possible to hide events that are inside background events so that the user cannot see it?
if yes what is the way to do it ?
var isValidEvent = function(start,end,id){
return $("#calendar").fullCalendar('clientEvents', function (event) {
return (event.rendering === "background" && id!='test' &&
(start>event.start) && (end<event.end)) ;
}).length > 0;
};
eventRender:function(event, element, view) if(isValidEvent(event.start,event.end,event.id)){
$(element).hide();
},
As of the docs, eventRender callback should either return an event OR false if the event should be hidden:
eventRender:function(event, element, view)
if(isValidEvent(event.start,event.end,event.id)){
return event;
}
else {
return false;
}
},
I haven't tested yet as I don't need it, but should work that way.
I got it like this:
eventRender:function(event, element, view){
var array= new Array();
array = $("#calendar").fullCalendar('clientEvents','test');
for(i of array){
if(event.source.url=="events.php" && moment(event.start)>=moment(i.start) && moment(event.end)<=moment(i.end)){
return false;
}
} }
Related
I am writing a custom attribute in aurelia and in my attribute class, I have a bindable property named 'visibility'. Then binding to this property from outside (parent component) and changing the value on that component, fires visibilityChanged but in my attribute class, when I change the value, the visibilityChanged method does not get called.
For example:
export class PaOnScreenKeyboardCustomAttribute {
#bindable visibility = false;
visibilityChanged(newValue, oldValue) {
console.log('change visibility');
if (this.keyboardElement) {
this.keyboardElement.style.display = newValue ? 'initial' : 'none';
}
}
_onElementFocused(event) {
// let htmlElement = this; // use this if needed
this.visibility = true;
console.log('show');
}
_onElementDefocused(event) {
// let htmlElement = this; // use this if needed
this.visibility = false;
console.log('hide');
}
}
How should I change the property value inside the class, so that changing calls visibilityChanged?
I found the answer and writing it down here. The problem was about the context being changed, and not about the propagation of change event.
I have set _onElementFocused as listener over element focus event and I was passing the function and not using arrow functions or something else. See this:
showOnFocusChanged(newValue, oldValue) {
if (newValue === true || newValue === 'true') {
this.element.addEventListener('focus', this._onElementFocused);
this.element.addEventListener('focusout', this._onElementDefocused);
} else {
this.element.removeEventListener('focus', this._onElementFocused);
this.element.removeEventListener('focusout', this._onElementDefocused);
}
}
this way, in the _onElementFocused function, the this refers to element that is calling the event. So this.visibility = true; changes the visibility property on that element and not on the viewmodel (custom attribute class). So I have changed it call to arrow function type and now everything goes right. Like this:
showOnFocusChanged(newValue, oldValue) {
if (newValue === true || newValue === 'true') {
this.element.addEventListener('focus', (event) => this._onElementFocused(event));
this.element.addEventListener('focusout', (event) => this._onElementDefocused(event));
} else {
this.element.removeEventListener('focus', (event) => this._onElementFocused(event));
this.element.removeEventListener('focusout', (event) => this._onElementDefocused(event));
}
}
as can be seen, the problem was not about aurelia and was about javascript context itself but was confusing me. Hope this helps others. TG.
Please help with the script function on how to make select2 plugin work in wizard jquery template it is not firing and i'm using the search box, when it clicked it jams.Thank you
$('.class').select2(); AFTER $('#form').steps();
This has helped me thanks but..
$("#form").steps({
bodyTag: "fieldset",
onStepChanging: function (event, currentIndex, newIndex)
{
// Always allow going backward even if the current step contains invalid fields!
if (currentIndex > newIndex)
{
return true;
}
// Forbid suppressing "Warning" step if the user is to young
if (newIndex === 3 && Number($("#age").val()) < 18)
{
return false;
}
var form = $(this);
// Clean up if user went backward before
if (currentIndex < newIndex)
{
// To remove error styles
$(".body:eq(" + newIndex + ") label.error", form).remove();
$(".body:eq(" + newIndex + ") .error", form).removeClass("error");
}
// Disable validation on fields that are disabled or hidden.
form.validate().settings.ignore = ":disabled,:hidden";
// Start validation; Prevent going forward if false
return form.valid();
},
onStepChanged: function (event, currentIndex, priorIndex)
{
// Suppress (skip) "Warning" step if the user is old enough.
if (currentIndex === 2 && Number($("#age").val()) >= 18)
{
$(this).steps("next");
}
// Suppress (skip) "Warning" step if the user is old enough and wants to the previous step.
if (currentIndex === 2 && priorIndex === 3)
{
$(this).steps("previous");
}
},
onFinishing: function (event, currentIndex)
{
var form = $(this);
// Disable validation on fields that are disabled.
// At this point it's recommended to do an overall check (mean ignoring only disabled fields)
form.validate().settings.ignore = ":disabled";
// Start validation; Prevent form submission if false
return form.valid();
},
onFinished: function (event, currentIndex)
{
var form = $(this);
// Submit form input
form.submit();
}
}).validate({
errorPlacement: function (error, element)
{
element.before(error);
},
rules: {
confirm: {
equalTo: "#password"
}
}
});
//IMPORTANT
var form =$("#form");
form.find("#personel_id").select2({
theme: 'bootstrap4',
});
I am developing a cross browser extension using kango framework. I want to add my extension to the context menu of the browser. I already have set "context_menu": true in the permissions array in extension_info.json file, but still my extension does not appear in the context menu ( when there is a right click in the browser window). How can I do this?
You need to add an event listener to main.js like this:
kango.ui.contextMenuItem.addEventListener(kango.ui.contextMenuItem.event.CLICK, function() {
kango.browser.tabs.getCurrent(function(tab) {
tab.dispatchMessage('ContextMenuItemClick');
});
});
And in the content.js you need to consume the event like this:
function handleContextMenuClick() {
var clickedElement = null;
if ('addEventListener' in document) {
document.addEventListener('mousedown', function(event) {
if (event.button == 2 && IsSupported()) {
clickedElement = event.target;
kango.console.log('StopIt menu item click 1');
}
}, true);
} else {
document.attachEvent('onmousedown', function(event) {
event = event || window.event;
if (event.button == 2&& IsSupported()) {
clickedElement = event.srcElement;
kango.console.log('StopIt menu item click 2');
}
});
}
kango.addMessageListener('ContextMenuItemClick', function(event) {
kango.console.log("addMessageListener: ContextMenuItemClick added");
});
}
handleContextMenuClick();
// Only activate the menu when the user is on facebook or twitter.
// This should be loaded from a service and updated one each new domain visited.
function IsSupported()
{
if(document.domain.indexOf("facebook.") > -1) return true;
if(document.domain.indexOf("twitter.") > -1) return true;
return false;
}
How can I prevent events with conflict time? Is there any variable to set up?
No, there is not a variable to set, but you can use something like clientEvents which retrieves events that fullcalendar has in memory. You can use the function below in the eventDrop. In the case below it uses a function to filter out whether the event will have have an overlap or not.
function checkOverlap(event) {
var start = new Date(event.start);
var end = new Date(event.end);
var overlap = $('#calendar').fullCalendar('clientEvents', function(ev) {
if( ev == event)
return false;
var estart = new Date(ev.start);
var eend = new Date(ev.end);
return (Math.round(estart)/1000 < Math.round(end)/1000 && Math.round(eend) > Math.round(start));
});
if (overlap.length){
//either move this event to available timeslot or remove it
}
}
you can add eventOverlap : false in the celendar config,
http://fullcalendar.io/docs/event_ui/eventOverlap/
Correct overlap checking.
eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
/// deny overlap of event
var start = new Date(event.start);
var end = new Date(event.end);
var overlap = $('#calendar').fullCalendar('clientEvents', function(ev) {
if( ev == event) {
return false;
}
var estart = new Date(ev.start);
var eend = new Date(ev.end);
return (
( Math.round(start) > Math.round(estart) && Math.round(start) < Math.round(eend) )
||
( Math.round(end) > Math.round(estart) && Math.round(end) < Math.round(eend) )
||
( Math.round(start) < Math.round(estart) && Math.round(end) > Math.round(eend) )
);
});
if (overlap.length){
revertFunc();
return false;
}
}
Add custom property in the event object overlap:false for example your event object will be
`{
title:'Event',
start: '2017-01-04T16:30:00',
end: '2017-01-04T16:40:00',
overlap:false
}`
Now override selectOverlap function,
selectOverlap: function(event) {
if(event.ranges && event.ranges.length >0) {
return (event.ranges.filter(function(range){
return (event.start.isBefore(range.end) &&
event.end.isAfter(range.start));
}).length)>0;
}
else {
return !!event && event.overlap;
}
},
It will not let the another event to override the already placed event.
This does the trick. It also handles resizing overlapping events
var calendar = new Calendar(calendarEl, {
selectOverlap: false,
eventOverlap: false
}
});
I'm having a problem with the following situation.
I have an ascx which contains a submit button for a search criteria and I am trying to call a validation function in a js file I've used throughout the site (this is the first time I'm using it in an ascx).
Now I've just tried this:
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jsAdmin_Generic_SystemValidation.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".submitBtn").click(function (e) {
alert("test");
alert($.Validate());
alert("test 2");
});
});
</script>
The file is being referenced correctly as I am already seeing posts in Firebug that are done by it.
This is the function:
jQuery.extend({
Validate: function () {
var requiredElements = $('.required').length; // Get the number of elements with class required
$('.required').each(function () {
// If value of textbox is empty and have not
// yet been validated then validate all required
// elements. i.e.
if (($(this).val() == "") || ($(this).hasClass("validationError")) || ($(this).hasClass("validationAlert")) || ($(this).hasClass("validationOk") == false)) {
validate($(this));
}
});
if ($('.validationOk').length == requiredElements) {
return true;
} else {
return false;
}
},
// Another extended function, this function
// is used for pages with the edit-in-place
// feature implemented.
validateElement: function (obj) {
var elementId = obj.attr("id"); // id of the button clicked.
var flag = 0;
if (elementId.toLowerCase() == "paymentmethodid") {
// Case elementId = paymentMethodId then check all the
// elements with css class starting with openStorage
var requiredElements = $(document).find("input[class*='openStorage']").length; // Get the number of elements with css class starting with openStorage
// Loop through all the elements with css class containing
// openStorage abd validate each element.
$(document).find("input[class*='openStorage']").each(function () {
if (($(this).val() == "") || ($(this).hasClass("validationError")) || ($(this).hasClass("validationAlert"))) {
validate($(this));
}
if ($(this).hasClass("validationOk")) {
flag++;
} else if (($(this).hasClass("validationError")) || ($(this).hasClass("validationAlert"))) {
flag--;
}
});
// If all elements are valid return true else return false
if (flag == requiredElements) {
return true;
} else {
return false;
}
} else if (elementId.toLowerCase() == "registeredfortax") {
if (($('.TaxRegistrationNumber').val() == "") || ($('.TaxRegistrationNumber').hasClass("validationError")) || ($('.TaxRegistrationNumber').hasClass("validationAlert"))) {
validate($('.TaxRegistrationNumber'));
}
if ($('.TaxRegistrationNumber').hasClass("validationOk")) {
return true;
} else {
return false;
}
} else {
var elementClass = "." + elementId;
if (($(elementClass).val() == "") || ($(elementClass).hasClass("validationError")) || ($(elementClass).hasClass("validationAlert")) || ($(elementClass).hasClass("validationOk") == false)) {
validate($(elementClass));
}
if ($(elementClass).hasClass("validationOk") && ($(elementClass).hasClass("required"))) {
return true;
} else if ($(elementClass).hasClass("required") == false) {
return true;
}else {
return false;
}
}
}
});
Now at first I was getting "Validate() is not a function" in firebug. Since I did that alert testing, I am getting the first alert, then nothing with no errors.
Can anyone shed some light?
Thanks
Are you using the extend method properly? ...
http://api.jquery.com/jQuery.extend/