Develop Reference

Full calendar events default display shows start time

Using Fullcalender.js , i am showing events in calendar .
I added dayclick and event click funtionality. But when i use date.format() in dayClick (), it shows error date.Format() is not the function.
I upgraded my fullcalendar to v3.5.1 , after that i can get dayClick functionality very well. But the events showing Start time as default even if im not giving any title to it.
$(document).ready(function() {
$('#ConfCalendarBlock').fullCalendar({
height:400,
editable: true,
events: modJs.getConfJsonUrl(),
loading: function(bool) {
if (bool) $('#loadingConfCalendarBlock').show();
else $('#loadingConfCalendarBlock').hide();
},
dayClick: function (date, jsEvent, view) {
modJs.getdayclick(date.format());
},
eventClick: function(calEvent, jsEvent, view) {
modJs.getEventClcik(calEvent.id);
},
});
});
in my php code
public function listToEvent($book){
$event = array();
$starttime = date("g:i a", strtotime($book->from_date));
$endtime = date("g:i a", strtotime($book->to_date));
$event['id'] = $book->id;
$event['title'] = $starttime."-".$endtime. " (".$book->type.")";
$event['start'] = $book->from_date;
$event['end'] = $book->to_date;
$eventBackgroundColor = "";
$event['color'] = $eventBackgroundColor;
$event['backgroundColor'] = $eventBackgroundColor;
$event['textColor'] = "#FFF";
return $event;
}
Calendar shows the event as
9:15a 9:15am - 10:30am (Meeting)
The start time shows twice ,but if i refer old version of Calendar, it shows as i want.
Even i didnt give any title to the event, then the calendar shows the start time as 9:15a in blue color event bar.

It seems you need to set displayEventTime to false

In Reactjs, how to trigger and respond to a user defined event?

I know you can do the following in render to handle click event, but how to respond to a user defined event, such as "newUserAdded".
<button onClick={this.handleAddNew}> Add Friend </button>
Here is what I mean by example:
var ele = document.getElementsByTagName('body')[0];
var myEvent = new Event('newUserAdded');
ele.addEventListener('newUserAdded', function () {alert('newUserAdded triggered')});
ele.dispatchEvent(myEvent);
// then you get an alert message
// how to do this in reactJS?
I am thinking of the following way to send message among React components:
var User = React.class({
...
emitNewUserEvent: function (e) {
// trigger the new user added message
// how?
},
...
});
Var DropDownSelection = React.class({
// in this component, I'd like to respond to 'NewUserAddedEvent' to add
// the newly added user to drop down list
// how?
});
Please advise! Thanks!

Backbone Event Triggering a Popup getting blocked.

I'm having an issue where I want to call GET on an endpoint, and based on the result of that, either render a modal or follow a link.
Currently, when I get the click event, I disable the default behavior of the anchor tag (I don't want to redirect before I check the result.).
I do a GET on the endpoint and throw an event from the callback if one of the return parameters is true. This event has a listener on it that
will trigger rendering and displaying the modal.
The issue with this methodology is: The GET callback doesn't allow me to redirect to the link unless I disable popup blockers and I would like my
users to have a good user experience.
I'm debating between a polling strategy (non-performant, not always accurate) or having the click event open a window that will either follow the anchor tag
or render the modal.
Would appreciate any other ideas or suggestions. Thanks!
Template is defined as follows:
var template = _.template('\
<a href="<%-linkUrl%>?fromHome=true" draggable="false" data-type="app-button" data-se="app-button" target="_blank" \
class="app-button">\
<img draggable="false" src="<%-logoUrl%>" class="logo">\
<span data-action="show-settings" class="icon-button <%-showIcon%>">\
<span class="icon icon-settings-dark"></span>\
</span>\
</a>\
<p class="app-button-name" data-se="app-button-name"><%-label%></p>\
');
Events are defined as follows:
events: function () {
var events = {};
events['click [data-type=app-button]'] = '_firstLoginSettings';
return events;
},
Now here's the function itself being called.
_firstLoginSettings: function (e) {
if (this.model.get('__notVerified__')) {
this.state.trigger(Events.SHOW_CONFIRMATION, this.model);
} else {
e.preventDefault();
e.stopPropagation();
this.state.trigger(Events.CHECK_VPN_DIALOG, this.model);
}
},
I have a listener on my main router.
this.listenTo(this.state, Events.CHECK_VPN_DIALOG, this._checkVpnDialog);
And here's the rest of the router code:
_checkVpnDialog: function (appLink, appLinkSettings) {
var self = this;
var vpnSettings = new VpnSettings({
appLink: appLink,
'__appInstanceId__' : appLink.get('__appInstanceId__')
});
vpnSettings.fetch({}).done(_.bind(function(vpnSettings) {
if (vpnSettings.checkVpn) {
self.state.trigger(Events.SHOW_VPN_DIALOG, appLink);
} else {
appLink._firstLoginSettings();
//This doesn't work because it's not associated with a user action, so it won't let me open this window. This isn't part of the click event loop any more.
var linkUrlTemplate = _.template('<%-linkUrl%>?fromHome=true');
window.open(linkUrlTemplate({linkUrl: appLink.get('__linkUrl__')}));
}
}));
},
_showVpnDialog: function (appLink, appLinkSettings) {
this.credsDialog && this.credsDialog.remove();
if (!appLinkSettings) {
appLinkSettings = new AppLinkSettings({
id: appLink.get('id'),
'__tab__': appLink.get('__tab__')
});
appLinkSettings.fetch().done(_.bind(this._renderVpnDialog, this, appLink, appLinkSettings));
} else {
this._renderVpnDialog(appLink, appLinkSettings);
}
},
_renderVpnDialog: function (appLink, appLinkSettings) {
if (appLink.get('__needsVpn__')) {
this.vpnDialog = new VpnDialog({
model: appLink,
appLink: appLink,
settings: this.settings,
state: this.state
});
this.vpnDialog.render();
}
},

So what I did instead was to open a new window with the click, and then change the location of the window so it would either go to the new location or close itself. Kind of a hacky solution, but it works!

eventlistener and dispatchevent in the same widget

I have a widget which includes an event listener:
var MyWidget = function(parseTreeNode,options) {
this.initialise(parseTreeNode,options);
this.addEventListeners([
{type: "tw-my-message", handler: "handleMyMessage"}
]);
};
and, in the handler of the same widget a dispatchevent:
MyWidget.prototype.handleMyMessage = function(event) {
...
this.dispatchEvent({type: "tw-my-message",param: "myparam"});
...
The widget listens for the message, then passes on the same message (if required) to another widget.
Currently I have to use two similar widgets (with the same function) which listen for different messages to avoid the widget from catching its own message.
How do I prevent the widget from catching its own message?

You will need to pass along the publisher of the event, and then test to make sure that the event publisher is not this. Pseudo code to follow:
MyWidget.prototype.handleMyMessage = function(event) {
if (event.publisher === this)
return; // bail out, I published this event
// ...
};
Pseudo code for dispatchEvent:
MyWidget.prototype.dispatchEvent = function(event) {
event.publisher = this;
// ... loop through subscribers and notify them
};

send value from popup('open') to 'popupbeforeposition'

I've a function that is triggered from a on click event. It's open up my popup, and im woundering how to send my date to my 'popupbeforeposition'.
module.selectedDay = function($this) {
var date = $this.data('date');
$('#popupWorkSelect').popup('open');
};
$('#popupWorkSelect').on({
popupbeforeposition: function (event) {
//Get date sended to this function?
console.log(event);
},
popupafterclose: function(event) {
}
});
I know that I can work with my 'module.selectedDay' function like this but it's not the way I want to do it.
module.selectedDay = function($this) {
var date = $this.data('date');
$('#popupWorkSelect').find('#myElement').innerHTML = date;
$('#popupWorkSelect').popup('open');
};

When the click happens, store the value in data of the popup.
$popup.data("mydata", date);
in the popupbeforeposition event, take it out from data and use it. (Here the context would be within the popup so data you need would lie in $(this). So the way of access would be this:
$this.data("mydata")
Demo : http://jsfiddle.net/hungerpain/LV9VW/3/
PS assume $popup and $this are the popup elements