I'm using alloyui 2.0 scheduler http://alloyui.com/versions/2.0.x/ (with Liferay EE 6.2)
this is my scheduler :
YUI().use('aui-scheduler', function(Y) {
var config = {
color: '#2bd434',
content: 'Prova!',
id: 'CUSTOM-ID',
disabled: true,
allDay: true
}
var Events = new Y.SchedulerEvent(config);
var weekView = new Y.SchedulerWeekView();
var scheduler = new Y.Scheduler(
{
boundingBox: '#myScheduler',
date: new Date(),
items: [Events],
render: true,
views: [weekView]
}
)
});
When I click on event, I want open another page with details of that specific event.
I have this listener on my scheduler :
$("#myScheduler").on('click','.scheduler-event',function(e){
console.log(e);
var instance = this;
console.log(e.currentTarget);
});
I how can I set custom attributes on currentTarget?
If is not possible, can I set a custom id for that event?(so I can get the detail of this one)
I solved doing this :
Y.Do.after(function(e) {
$('.popover').hide();
var evt = e.getData('scheduler-event');
var id = evt.get('id');
//Other attr created in events array
var MYATTRIBUTE = evt.get('MYATTRIBUTE');
}, eventRecorder, 'showPopover');
Related
I have a custom development with FullCalendar v4 js and I'm encountering a problem with eventLimitClick method.
When I click on it I want all events displayed inside popover to have a custom onclick eventListener for me to display aditional information of this current event in another custom popup.
This is my method so far:
eventLimitClick : function(info){
info.segs.forEach(function(seg){
seg.el.querySelector('div.fc-content').addEventListener('click', function(event){
console.log('event definition', event);
});
});
return "popover";
}
But this is adding the listener to the elements I already see in my calendar. I also tried with hiddenSegs instead of segs but it's not working.
So is there any way to achieve this without having to create a custom popup with all the events?
** EDIT ** [included code]
calendar object
{
locale : 'en',
plugins : ['dayGrid','timeGrid','list','interaction'],
header : {
left : 'prev,next today',
center : 'title',
right : 'dayGridWeek, dayGridMonth, dayGridDay'
},
allDaySlot : false,
aspectRatio : 1.8,
displayEventTime : false,
editable : false,
navLinks : true,
eventLimit : true,
views : {
dayGridMonth : {
eventLimit : 2
}
},
events : this.eventLIST,
datesRender : this.calendarviewRender,
eventClick : this.calendareventClick,
eventRender : this.calendareventRender
}
datesRender, eventClick and eventRender functions:
calendarviewRender = (info) => {
//set current and end dates
this.endDate = info.view.activeEnd;
this.currentDate = info.view.activeStart;
//retrieve fresh event/task info
this.refreshCalendar();
}
calendareventClick = (info) => {
this.info = {id : info.event.id,
tipo : info.event.extendedProps.tipo,
tipoObj : info.event.extendedProps.tipoObj,
isClosed : info.event.extendedProps.isClosed && info.event.extendedProps.isClosed !== null ? (info.event.extendedProps.isClosed === 'false' ? false : true) : false,
campos : info.event.extendedProps.lCamposInfo};
//allow second button
this.info.displaysecondbutton = !this.info.isClosed && this.info.tipoObj === 'Task';
//allow popup display
this.allowpopup = true;
info.jsEvent.preventDefault();
}
calendareventRender = (info) => {
let html = "<i class='fa fa-" + info.event.extendedProps.icon + " fa-lg'></i>";
info.el.querySelector('div.fc-content').style.cssText = 'height: 100%;';
//if month view apply padding
if(info.view.type.includes('dayGrid')) info.el.querySelector('div.fc-content').classList.add('slds-p-around_x-small');
//center elements
info.el.querySelector('div.fc-content').classList.add('slds-align_absolute-center');
//append icon
info.el.querySelector('div.fc-content').innerHTML = html;
}
I also removed eventLimitClick.
Based on your comments i see you were working with lightning-web-components.
I was facing same issue as you when working with LWC on salesforce.
I was able to solve this by editing main.js in daygrid package and add delay when Popover was getting hidden.
Here is snippet of code
function Popover(options) {
var _this = this;
this.isHidden = true;
this.margin = 10; // the space required between the popover and the edges of the scroll container
// Triggered when the user clicks *anywhere* in the document, for the autoHide feature
this.documentMousedown = function (ev) {
if (_this.el && !_this.el.contains(ev.target)) {
setTimeout(function () {
_this.hide();
}, 1000);
}
};
this.options = options;
}
functions starts in line 100 of main.js.
I was using Fullcalendar v4
Hello everyone I m actually work on geographic application with ArcGsi JavaScript API and I am looking for method that is run when user click on suggestion Menu in the Search Bar for show a Specific
feature InfoWindow
There are a few ways.
First mouse drag options;
var services = new FeatureLayer("http://blablabla/MapServer/0", {
// mode: FeatureLayer.MODE_SNAPSHOT,
// infoTemplate: popupTemplate,
outFields: ["NAME", "ID", "VALUE"]
});
services.on("mouse-over", function (evt) {
var t = "<div class='title'><b>${NAME}</b></div><p>${ID}<br>${VALUE}<br>${VALUE}<br><strong>value: </strong>${VALUE}</p>";
var content = esriLang.substitute(evt.graphic.attributes, t);
//var highlightGraphic = new Graphic(evt.graphic.geometry, highlightSymbol);
//map.graphics.add(highlightGraphic);
dialog.setContent(content);
domStyle.set(dialog.domNode, "opacity", 1);
dijitPopup.open({
popup: dialog,
x: evt.pageX,
y: evt.pageY
});
});
services.on("mouse-out", function (evt) {
closeDialog();
});
Or second away. Click to graphic;
var services = new FeatureLayer("http://blablabla/MapServer/0", {
mode: FeatureLayer.MODE_SNAPSHOT,
// infoTemplate: popupTemplate,
outFields: ["NAME", "ID", "VALUE"]
});
services.on("click", function (evt) {
var name = evt.graphic.attributes.NAME;
var value = evt.graphic.attributes.VALUE;
// your custom html
$("#SevicesContainer").collapse("show");
$("#SevicesContainer").draggable({ containment: "map", scroll: false });
$("#SevicesContainer .close").click(function () {
$("#SevicesContainer").collapse("hide");
});
});
Is there a way to change the start time of an Event, wich I draged into the calendar.
The Event comes from an external Source like this:
//initialize the external events
$('#external-events .fc-event').each(function() {
/* // store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
*/
var eventObject = {
title: $.trim($(this).text()), // use the element's text as the event title
id: $(this).data('id')
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
I want to change/update the start Time and Title - if necessary - of the Event in a modal Dialog. It seems to work fine, but everytime I add another Event by dragging and want to change it, it changes all other dragged Events, too.
eventClick: function(calEvent, jsEvent, view) {
//Sending data to modal:
$('#modal').modal('show');
$("#input_title").val(calEvent.title);
var my_time = moment(calEvent.start).format('LT');
$("#input_time").val(my_time);
var my_date = moment(calEvent.start).format("YYYY-MM-DD");
$("#input_date").val(my_date);
// waiting for button 'save' click:
$('.btn-primary').on('click', function (myEvent) {
calEvent.title = $("#input_title").val();
var my_input_time = $("#input_time").val();
var momentTimeObj = moment(my_input_time, 'HH:mm:ss');
var momentTimeString = momentTimeObj.format('HH:mm:ss');
var my_input_date = $("#input_date").val();
var momentDateObj = moment(my_input_date, 'YYYY-MM-DD');
var momentDateString = momentDateObj.format('YYYY-MM-DD');
calEvent.start = moment(momentDateString + ' ' + momentTimeString, "YYYY-MM-DD HH:mm");
$('#calendar').fullCalendar('updateEvent', calEvent);
$('#calendar').fullCalendar('unselect');
$('#modal').modal('hide');
});
}
What I am doing wrong?
I finally figured out, how to do this. In my example I'm able to change the event end-time by calculating the duration between start and end and diplay it as HH:mm. So the User can change the duration like 01:00 (hour). Also I add some additional fields like "information" and "color". After the changes in a modal (bootstrap) are made, I write it back to the calendar. Maybe there are better solutions for this, but for me it works fine.
// initialize the external events
$('#external-events .fc-event').each(function() {
// Start Time: String to Date
var my_start_time = new Date (new Date().toDateString() + ' ' + $(this).data('start'));
var start_time = moment(my_start_time).toDate();
// End Time: String to Date -> Date to Decimal
var my_dur_time = new Date (new Date().toDateString() + ' ' + $(this).data('duration'));
var dur_time = moment(my_dur_time).format('HH:mm');
dur_time = moment.duration(dur_time).asHours();
//Add Decimal End Time to Start Time
var end_time = moment(start_time).add(dur_time, 'hours');
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
start: $(this).data('start'),
end: end_time,
title: $.trim($(this).text()), // use the element's text as the event title
stick: true, // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
$('#calendar').fullCalendar({
//Other calendar settings here ...
eventClick: function(event, element) {
curr_event = event;
var inp_start_time = moment(event.start).format();
var inp_end_time = moment(event.end).format();
var diff_time = moment(moment(inp_end_time),'mm').diff(moment(inp_start_time),'mm');
diff_time = moment.duration(diff_time, "milliseconds");
diff_time = moment.utc(moment.duration(diff_time).asMilliseconds()).format("HH:mm");
var my_time = moment(event.start).format('HH:mm');
var my_date = moment(event.start).format('DD.MM.YYYY');
var my_hidden_date = moment(event.start).format('YYYY-MM-DD');
$("#inp_time").val(my_time);
$("#inp_date").val(my_date);
$("#inp_hidden_date").val(my_hidden_date);
$("#inp_title").val(event.title);
$("#inp_duration").val(diff_time);
$("#inp_information").val(event.information);
$("#inp_color").val(event.color);
$('#modal').modal('show');
}
});
$("#button_ok").click(function (myevent) {
var my_input_time = $("#inp_time").val();
var momentTimeObj = moment(my_input_time, 'HH:mm:ss');
var momentTimeString = momentTimeObj.format('HH:mm:ss');
var my_input_date = $("#inp_hidden_date").val();
var momentDateObj = moment(my_input_date, 'YYYY-MM-DD');
var momentDateString = momentDateObj.format('YYYY-MM-DD');
var datetime = moment(momentDateString + ' ' + momentTimeString, "YYYY-MM-DD HH:mm");
var my_title = $("#inp_title").val();
var my_duration = $("#inp_duration").val();
var new_dur_time = moment.duration(my_duration).asHours();
//Add Decimal End Time to Start Time
var new_end_time = moment(datetime).add(new_dur_time, 'hours');
var new_information = $("#inp_information").val();
var new_color = $("#inp_color").val();
$.extend(curr_event, {
title: my_title,
start: datetime,
end: new_end_time,
information: new_information,
color: new_color
});
$("#calendar").fullCalendar('updateEvent', curr_event);
});
});
Hope this helps.
Greetings.
The requirement is to add a new feature from template picker but without applying it, can i show the attribute inspector than save the feature.
selectedTemplate = templatePicker.getSelected();
This selectedTemplate is then selected to put the points on the map than opens the attribute inspector by selecting it.
selectedTemplate.featureLayer.applyEdits([newGraphic], null, null);
Sample Code Block :
dojo.connect(drawToolbar, "onDrawEnd", function(geometry) {
//display the editable info window for newly created features
if (map.infoWindow.isShowing) {
map.infoWindow.hide();
}
drawToolbar.deactivate();
var fieldAttributes = layerFieldToAttributes(selectedTemplate.featureLayer.fields);
var newAttributes = dojo.mixin(fieldAttributes, selectedTemplate.template.prototype.attributes);
var newGraphic = new esri.Graphic(geometry, null, newAttributes);
var layerInfos = [{
'featureLayer': selectedTemplate.featureLayer,
'isEditable': true
}];
var attInspector = new esri.dijit.AttributeInspector({
layerInfos: layerInfos
}, dojo.create("div"));
selectedTemplate.featureLayer.applyEdits([newGraphic], null, null, function() {
var screenPoint = map.toScreen(getInfoWindowPositionPoint(newGraphic));
map.infoWindow.setContent(attInspector.domNode);
map.infoWindow.resize(325, 185);
map.infoWindow.show(screenPoint, map.getInfoWindowAnchor(screenPoint));
templatePicker.clearSelection();
});
dojo.connect(attInspector, "onAttributeChange", function(feature, fieldName, newFieldValue) {
feature.attributes[fieldName] = newFieldValue;
feature.getLayer().applyEdits(null, [feature], null);
});
dojo.connect(attInspector, "onDelete", function(feature) {
feature.getLayer().applyEdits(null, null, [feature]);
map.infoWindow.hide();
});
});
}
I would like my client first add the attribute to feature and (save & apply) it.
Any help would be appreciated.
Here is the sample project : https://www.dropbox.com/s/fh71g1k9nsa70nq/index-2.html.zip?dl=0
I dont think you can do that with the AttributeInspector, try creating a custom popup that will have options to save and delete/cancel, when saving fire the applyEdits, when clicking delete, remove, ect.
Content:
var content = "<input id='text1'></input> </br>" +
"<input id='text1'></input> </br>" + "<button id='submit'>Submit</button>" + "<button id='delete'>Delete</button>"
/*
var attInspector = new AttributeInspector({
layerInfos: layerInfos
}, dojo.create("div"));
*/
map.infoWindow.setTitle(selectedTemplate.featureLayer.name);
map.infoWindow.setContent(content);
map.infoWindow.resize(350, 240);
map.infoWindow.show(evt.geometry, map.getInfoWindowAnchor(evt.geometry));
Listener:
on(map.infoWindow, "show", function () {
on(dom.byId("submit"), "click", function () {
alert("I should be saving");
});
on(dom.byId("delete"), "click", function () {
alert("I should be deleting");
});
})
Check out this fiddler: https://jsfiddle.net/kreza/jpLj5y4h/2/
I am developing a project with AngularJS and using Angular-UI UI-Calendar. In my code I initialize eventSources model for ui-calendar to empty array ([]) and set ui-config "events parameter" to a custom function. That function makes an $http request and then calls the callback function given to the events function.
However, I found out that when I load the page or change the month viewed by left or right buttons, events function called twice. How can I solve that?
Here is my code:
function CalendarCtrl($scope, Data){
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
// Stores all events
var events = [];
/* config object */
$scope.uiConfig = {
calendar:{
height: 450,
editable: true,
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
month: "Ay",
week: "Hafta",
day: "Gün",
list: "Ajanda"
},
allDayText: "Tüm gün",
eventLimitText: "daha fazla",
firstDay: 1,
timeFormat: 'H:mm',
axisFormat: 'H:mm',
lazyFetching: true,
// Here listen for calendar change events
events: getEvents
}
};
// For angular ui-calendar element
$scope.eventSources = [];
// Calendar event handlers
function getEvents(from, to, callback){
console.log(from); // For test purposes
// Request for data from server and when it comes, call callback to update calendar
Data.calendar.get(moment(from).unix(), moment(to).unix()).then(function(events){
angular.forEach(events, function(event){
event.start = moment.unix(event.start);
if(event.end){
event.end = moment.unix(event.end);
}
else{
delete event.end;
}
var d = event.start;
if(d.hour() == 0 && d.minute() == 0 && d.second() == 0){
event.allDay = true;
}
if(event.important){
event.className = "important-event";
}
event.editable = true;
});
callback(events);
});
}
I have the solution.
Instead of registering an event handler to $scope.uiConfig.calendar.events, register that same function to $scope.eventSources array. Like that:
$scope.eventSources = [getEvents];
Whenever view changes and calendar needs data it will look at the $scope.eventSources elements. And if an element is a function it will be called and results will be shown in calendar.
We ran into a similar problem in a project and our solution was also in the eventSource initialization putting an empty object inside the array.
$scope.eventSources = [{}];