Fullcalendar: How to dynamically bind/add events with angularjs

Fullcalendar: How to dynamically bind/add events with angularjs - javascript

how can I optimize my fullcalendar to dynamically add/bind events. I cannot find any usefull resources for angular. Most of the docs are jquery. Below is my set up. I have added the eventRender function but not filled. Thanks for the help..
function clearCalendar(){
if(uiCalendarConfig.calendars.myCalendar != null){
uiCalendarConfig.calendars.myCalendar.fullCalendar('removeProjects');
uiCalendarConfig.calendars.myCalendar.fullCalendar('unselect')
}
}
function populate() {
clearCalendar();
$http.get('/projs', {
cache: false,
params: {}
}).then(function data) {
angular.forEach(data.data, function (value) {
$scope.projects.push({
projectID : value.projectID,
client : value.client,
title: value.title,
description: value.description,
start: new moment(value.startAt),
end: new moment(value.endAt),
employees: value.employees,
allDay: value.isFullDay,
stick: true
});
});
});
}
populate();
$scope.uiConfig = {
calendar: {
height: 500,
editable: true,
displayEventTime: true,
header: {
left: 'month, agendaWeek, agendaDay',
center: 'title',
right: 'today prev,next'
},
selectable: true,
selectHelper: true,
select: function(start, end){
$scope.showSelected = false;
var fromDate = moment(start).format('DD/MM/YYYY LT');
var endDate = moment(end).format('DD/MM/YYYY LT');
$scope.Project = {
ProjectID : 0,
Client: '',
Title : '',
Description: '',
Employees: '',
StartAt : fromDate,
EndAt : endDate,
IsFullDay : false
}
$scope.ShowModal()
},
eventClick: function (project) {
$scope.showSelected = true;
$scope.SelectedProject = project;
var fromDate = moment(project.start).format('DD/MM/YYYY LT');
var endDate = moment(project.end).format('DD/MM/YYYY LT');
$scope.Project = {
ProjectID : project.projectID,
Client : project.client,
Title : project.title,
Description: project.description,
Employees: project.employees,
StartAt : fromDate,
EndAt : endDate,
IsFullDay : false
}
$scope.ShowModal()
},
eventRender: function(event, element, view) {
},
eventAfterAllRender: function (){
if($scope.projects.length > 0 && isFirstTime) {
uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.projects[0].start);
isFirstTime = false;
}
}
}
};
calendar in my html
<div class="col-md-8">
<div id="calendar" ui-calendar="uiConfig.calendar" ng-model="eventSource" calendar="myCalendar"></div>
</div>
UPDATE
current display on calendar

Fullcalendar accepts an eventSource object containing an array of events.
You're already building this array of events in $scope.projects. Now you can just add it to an eventSource like so:
$scope.eventSource = {
events: $scope.projects
};
You've alreay injected uiCalendarConfig so you can now add the eventSource to your calendar:
uiCalendarConfig.calendars['myCalendar'].fullCalendar('addEventSource', $scope.eventSource);
All this should happen just after your forEach loop.
function ctrl($scope, uiCalendarConfig, $timeout) {
$scope.eventSource = {};
$scope.config = {
calendar:{
editable: true,
header:{
left: '',
center: 'title',
right: ''
},
dayClick: dayClick
}
};
$scope.projects = [
{
projectID : 123,
client : 321,
title: "test",
description: "test",
start: moment(),
end: moment(),
allDay: true,
stick: true
}
];
$scope.eventSource = {
events: $scope.projects
};
function dayClick(date, jsEvent, view) {
var source = [
{
projectID : 58,
client : 85,
title: "new",
description: "new",
start: date.format().toString(),
allDay: true,
stick: true
}
];
uiCalendarConfig.calendars['projects'].fullCalendar('addEventSource', source);
}
}
angular.module('app', ['ui.calendar']);
angular.module('app')
.controller('ctrl', ctrl);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-calendar/1.0.0/calendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" />
<div ng-app="app">
<div ng-controller="ctrl">
<div calendar="projects" ui-calendar="config.calendar" ng-model="eventSource"></div>
{{hello}}
</div>
</div>

Related

FullCalendar error : Uncaught TypeError: calendar.fullCalendar is not a function

I have been getting an error when I want to add an event on fullcalendar, my code is correct because the console detects the day I click on it.
I looked at the topics that dealt with the same error but none of them allowed me to solve this error.
Except that an error occurs:
console
And here is my code :
$(document).ready(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'fr',
editable: true,
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
events: 'http://127.0.0.1:8000/calendar',
displayEventTime: false,
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Nom événement :');
if (title) {
var start = new Date().toISOString().slice(0, 10);
var end = new Date().toISOString().slice(0, 10);
$.ajax({
url: 'http://127.0.0.1:8000/calendarAjax',
data: {
title: title,
start: start,
end: end,
type: 'add',
},
type: 'POST',
success: function(donnees) {
calendar.fullCalendar('renderEvent', {
id: donnees.id,
title: title,
start: start,
end: end,
allDay: allDay
}, true);
calendar.fullCalendar('unselect');
}
});
}
},
});
calendar.on('dateClick', function(info) {
console.log('clicked on ' + info.dateStr);
});
calendar.render();
});
</script>
Thank you.

How to unselect one and multiple selected date in Fullcalendar?

I am using full calendar js in my code. I am able to select multiple dates in the calendar but I am not able to unselect the selected dates. Where do I need to changes in my code?
IN HTML FILE
<div class ="main-container fullcalendar-booking-course unselectCancel">
<div id="calendar"></div>
</div>
IN MY JS FILE
<script type="text/javascript">
$(document).ready(function() {
getFullCalendar();
</script>
<script type="text/javascript">
function getFullCalendar(){
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek'
},
views: {
month: {
titleFormat: 'YYYY, MM, DD'
}
},
validRange: function(nowDate) {
return {
start: nowDate,
end: nowDate.clone().add(1, 'months')
};
},
navLinks: true,
selectable: true,
selectHelper: true,
select: function(start, end) {
startDate = moment(new Date(start)).format("MM-DD-YYYY");
endDate = moment(new Date(end)).format("MM-DD-YYYY");
$("#calendar").fullCalendar('addEventSource', [{
start: start,
end: end,
rendering: 'background',
block: true,
}]);
$("#calendar").fullCalendar("unselect");
},
selectOverlap: function(event) {
return ! event.block;
},
editable: true,
eventLimit: true,
events: function(start, end, timezone, callback){
},
eventClick: function(event, jsEvent, view) {
},
loading: function(bool) {
$('#loading').toggle(bool);
},
eventRender: function(event, element){
},
eventAfterAllRender: function (view) {
var quantity = $('.fc-bgevent').length;
$("#quantity").val(quantity);
},
});
}
</script>
NOTE:
I am using fullcalendar js file and CSS file. I have initialized the function in the document ready function. I need to unselect the selected dates. I can select multiple dates but unable to unselect the dates.

FullCalendar timezone not working

I am trying to set the timezone in this example and when time on the calendar is selected, it's clearly still in UTC despite setting the timezone option to 'America/New_York':
$(document).ready(() => {
const fc = $('#c');
const tz = 'America/New_York';
const data = {
meetings: [
{
title: 'Test data',
start: 1513976400000,
end: 1513980000000
}
]
};
const myEvents = [];
for (let d = 0; d < data.meetings.length; d += 1) {
myEvents.push({
title: 'Booked',
start: (moment(data.meetings[d].start).tz(tz)),
end: (moment(data.meetings[d].end).tz(tz)),
});
fc.fullCalendar({
events: myEvents,
timezone: tz,
header: {
left: 'title',
center: 'month,agendaWeek',
right: 'today prev,next',
},
selectable: true,
selectHelper: true,
select(start, end) {
alert(`Book a meeting for ${start.format('h:mma on dddd M/D')}?`);
},
selectOverlap: false,
editable: false,
eventOverlap: false,
});
});
Can anyone confirm that this is a bug or user error?

Change moment default timezone to required timezone (below is the working
example change timezone and observe event on calendar).
$(function () {
var timeZone = 'America/New_York';
var now = moment().add(moment.tz(timeZone).utcOffset(), "m");
moment.tz.setDefault(timeZone);
$('#calendar').fullCalendar({
header: {
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: 'https://fullcalendar.io/demo-events.json',
defaultView: 'agendaWeek',
timeFormat: 'HH:mm',
editable: true,
});
});
<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://jakubroztocil.github.io/rrule/lib/rrule.js"></script>
<script src="https://momentjs.com/downloads/moment-timezone-with-data.js"></script>
<link href="https://fullcalendar.io/js/fullcalendar-3.0.1/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.js"></script>
<div id="calendar"></div>

Creating grid using gridx of dojo

I have tried following example for creating grid using gridx of dojo by including all the src from online.
But it shows Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience and multipleDefine error
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/dojo.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/dom.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/store/Memory.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dijit/form/Button.js"></script>
<script
src="http://cdn.rawgit.com/oria/gridx/1.3/core/model/cache/Sync.js"></script>
<script src="http://cdn.rawgit.com/oria/gridx/1.3/Grid.js"></script>
<script src="http://cdn.rawgit.com/oria/gridx/1.3/modules/CellWidget.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/domReady.js"></script>
<script type="text/javascript">
var grid;
var store;
dojo.addOnLoad(function(dom, Memory, Button, Cache, Grid) {
name: 'gridx', store = new Memory({
data : [ {
id : 1,
feedname : 'Feed4',
startstop : 0,
pause : '',
config : ''
}, {
id : 2,
feedname : 'Feed5',
startstop : 0,
pause : '',
config : ''
} ]
});
var cacheClass = "gridx/core/model/cache/Sync";
var structure = [
{
id : 'feedname',
field : 'feedname',
name : 'Feed Name',
width : '110px'
},
{
id : 'startstop',
field : 'startstop',
name : 'Start/Stop',
width : '61px',
widgetsInCell : true,
navigable : true,
allowEventBubble : true,
decorator : function() {
//Generate cell widget template string
return [
'<div style="text-align: center"><button data-dojo-type="dijit.form.Button" ',
'onClick="onStartStopButtonClick();" ',
'data-dojo-attach-point="btn" ',
'class="startStopButtonPlay" ',
'data-dojo-props="iconClass:\'startStopButtonPlayIcon\'" ',
'></button></div>' ].join('');
}
},
{
id : 'pause',
field : 'pause',
name : 'Pause',
width : '61px',
widgetsInCell : true,
navigable : true,
allowEventBubble : true,
decorator : function() {
//Generate cell widget template string
return [
'<div style="text-align: center"><button data-dojo-type="dijit/form/Button" ',
'onClick="onPauseButtonClick();" ',
'data-dojo-attach-point="btn2" ',
'class="pauseButton" ',
'data-dojo-props="iconClass:\'pauseIcon\'" ',
'></button></div>' ].join('');
}
},
{
id : 'config',
field : 'config',
name : 'Config',
width : '61px',
widgetsInCell : true,
navigable : true,
allowEventBubble : true,
decorator : function() {
//Generate cell widget template string
return [
'<div style="text-align: center"><button data-dojo-type="dijit/form/Button" ',
'onClick="onConfigButtonClick();" ',
'data-dojo-attach-point="btn3" ',
'class="configButton" ',
'data-dojo-props="iconClass:\'configIcon\'" ',
'></button></div>' ].join('');
}
} ];
//Create grid widget.
grid = Grid({
id : 'grid',
cacheClass : Cache,
store : store,
structure : structure,
//autoHeight: true,
columnWidthAutoResize : false
});
//Put it into the DOM tree.
grid.placeAt('compactWidgetGrid');
//Start it up.
grid.startup();
// TODO: I need to make Memory and store global somehow so I can get the data before creating the grid!!
updateGridXData(Memory, store);
});
function createDataStore(Memory, store) {
currentGridXData = new Memory({
// TODO: Replace data here with actual feed data received from server!
data : [ {
id : 1,
feedname : 'testingThis1',
startstop : 0,
pause : '',
config : ''
}, {
id : 2,
feedname : 'testingThis2',
startstop : 0,
pause : '',
config : ''
}, {
id : 3,
feedname : 'testingThis3',
startstop : 0,
pause : '',
config : ''
}, {
id : 4,
feedname : 'testingThis4',
startstop : 0,
pause : '',
config : ''
}, {
id : 5,
feedname : 'testingThis5',
startstop : 0,
pause : '',
config : ''
}, {
id : 6,
feedname : 'testingThis6',
startstop : 0,
pause : '',
config : ''
}, {
id : 7,
feedname : 'testingThis7',
startstop : 0,
pause : '',
config : ''
} ]
});
return currentGridXData;
}
function updateGridXData(Memory, store) {
grid.model.clearCache();
var appFeedsStore;
// Create new data store for GridX
//This line was giving a JavaScript error because appFeedListJSON undefined.
//Commnent out and uncomment other line to see difference.
appFeedsStore = createDataStore(Memory, store);
//appFeedsStore = createDataStore(Memory, store);
grid.setStore(appFeedsStore);
grid.model.store.setData(appFeedsStore);
// grid.refresh();
grid.body.refresh();
}
var toggled = false;
function toggle() {
myToggleButton.set("iconClass", toggled ? "startStopButtonPlayIcon"
: "startStopButtonStopIcon");
toggled = !toggled;
}
function onPauseButtonClick() {
alert("Pause!");
}
function onConfigButtonClick() {
alert("Config!");
}
// onClick functions for the app three buttons: Start/Stop, Pause, Config
function onStartStopButtonClick() {
alert("onStartStopButtonClick!");
}
function onPauseButtonClick() {
alert("onPauseButtonClick!");
}
function onConfigButtonClick() {
alert("onConfigButtonClick!");
}
</script>
</head>
<body class="claro">
<div id="compactWidgetGrid"></div>
</body>
I am trying this out using Tomcat server but not able to get the grid.
Could you please help me with this?

You were the missing the dojo require statement. You can find the working code below. I believe you are a beginner in dojo so you can find excellent article about dojo # http://dojotoolkit.org/reference-guide/1.7/dojo/require.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js' data-dojo-config="async: true, parseOnLoad: true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://cdn.rawgit.com/oria/gridx/1.3/resources/claro/Gridx.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/document.css">
<script type='text/javascript'>//<![CDATA[
var grid;
var store;
require({
packages: [
{
name: 'gridx',
location: '//cdn.rawgit.com/oria/gridx/1.3'
}
]
},[
//Require resources.
"dojo/dom",
"dojo/store/Memory",
"dijit/form/Button",
"gridx/core/model/cache/Sync",
"gridx/Grid",
"gridx/modules/CellWidget",
"dojo/domReady!"
], function(dom, Memory, Button, Cache, Grid){
store = new Memory({
data: [
{ id: 1, feedname: 'Feed4', startstop: 0, pause: '', config: ''},
{ id: 2, feedname: 'Feed5', startstop: 0, pause: '', config: ''}
]
});
var cacheClass = "gridx/core/model/cache/Sync";
var structure = [
{ id: 'feedname', field: 'feedname', name: 'Feed Name', width: '110px' },
{ id: 'startstop', field: 'startstop', name: 'Start/Stop', width: '61px',
widgetsInCell: true,
navigable: true,
allowEventBubble: true,
decorator: function(){
//Generate cell widget template string
return [
'<div style="text-align: center"><button data-dojo-type="dijit.form.Button" ',
'onClick="onStartStopButtonClick();" ',
'data-dojo-attach-point="btn" ',
'class="startStopButtonPlay" ',
'data-dojo-props="iconClass:\'startStopButtonPlayIcon\'" ',
'></button></div>'
].join('');
},
setCellValue: function(data){
//"this" is the cell widget
this.btn.set('label', data);
}
},
{ id: 'pause', field: 'pause', name: 'Pause', width: '61px',
widgetsInCell: true,
navigable: true,
allowEventBubble: true,
decorator: function(){
//Generate cell widget template string
return [
'<div style="text-align: center"><button data-dojo-type="dijit/form/Button" ',
'onClick="onPauseButtonClick();" ',
'data-dojo-attach-point="btn2" ',
'class="pauseButton" ',
'data-dojo-props="iconClass:\'pauseIcon\'" ',
'></button></div>'
].join('');
},
setCellValue: function(data){
//"this" is the cell widget
this.btn2.set('label2', data);
}
},
{ id: 'config', field: 'config', name: 'Config', width: '61px',
widgetsInCell: true,
navigable: true,
allowEventBubble: true,
decorator: function(){
//Generate cell widget template string
return [
'<div style="text-align: center"><button data-dojo-type="dijit/form/Button" ',
'onClick="onConfigButtonClick();" ',
'data-dojo-attach-point="btn3" ',
'class="configButton" ',
'data-dojo-props="iconClass:\'configIcon\'" ',
'></button></div>'
].join('');
},
setCellValue: function(gridData, storeData, cellWidget){
//"this" is the cell widget
cellWidget.btn3.set('label3', data);
}
}
];
//Create grid widget.
grid = Grid({
id: 'grid',
cacheClass: Cache,
store: store,
structure: structure,
autoHeight: true,
columnWidthAutoResize: false
});
//Put it into the DOM tree.
grid.placeAt('compactWidgetGrid');
//Start it up.
grid.startup();
// TODO: I need to make Memory and store global somehow so I can get the data before creating the grid!!
updateGridXData(Memory, store);
});
function createDataStore(Memory, store){
currentGridXData = new Memory({
// TODO: Replace data here with actual feed data received from server!
data: [
{ id: 1, feedname: 'testingThis1', startstop: 0, pause: '', config: ''},
{ id: 2, feedname: 'testingThis2', startstop: 0, pause: '', config: ''},
{ id: 3, feedname: 'testingThis3', startstop: 0, pause: '', config: ''},
{ id: 4, feedname: 'testingThis4', startstop: 0, pause: '', config: ''},
{ id: 5, feedname: 'testingThis5', startstop: 0, pause: '', config: ''},
{ id: 6, feedname: 'testingThis6', startstop: 0, pause: '', config: ''},
{ id: 7, feedname: 'testingThis7', startstop: 0, pause: '', config: ''}
]
});
return currentGridXData;
}
function updateGridXData(Memory, store) {
grid.model.clearCache();
var appFeedsStore;
// Create new data store for GridX
//This line was giving a JavaScript error because appFeedListJSON undefined.
//Commnent out and uncomment other line to see difference.
appFeedsStore = createDataStore(Memory, store, appFeedListJSON);
//appFeedsStore = createDataStore(Memory, store);
grid.setStore(appFeedsStore);
grid.model.store.setData(appFeedsStore);
// grid.refresh();
grid.body.refresh();
//},
//error: function (error) {
// console.log("Inside ERROR");
// }
//});
}
function onStartStopButtonClick(){
alert("Start/Stop!");
}
var toggled = false;
function toggle(){
myToggleButton.set("iconClass", toggled ? "startStopButtonPlayIcon" : "startStopButtonStopIcon");
toggled = !toggled;
}
function onPauseButtonClick(){
alert("Pause!");
}
function onConfigButtonClick(){
alert("Config!");
}
// onClick functions for the app three buttons: Start/Stop, Pause, Config
function onStartStopButtonClick(){
alert("onStartStopButtonClick!");
}
function onPauseButtonClick(){
alert("onPauseButtonClick!");
}
function onConfigButtonClick(){
alert("onConfigButtonClick!");
}
//]]>
</script>
</head>
<body>
<body class="claro">
<div id="compactWidgetGrid"></div>
</body>
</html>

Display popup like google calendar

I am working on a calendar .I have used fullcalendar.js to implement this.Now i want to display a popup like google calendar.I have used the code given below.Here the popup dialog will appear only in the center.I want to show it in the position of clicked event.Please give me a solution.
var calendar = $('#datepicker');
calendar.fullCalendar
({
defaultView: 'agendaWeek',
defaultEventMinutes: 60,
aspectRatio: 1.5,
dayClick: function(date, allDay, jsEvent, view)
{
if(eventEdit)
{
$('.ui-dialog').hide();
eventEdit = false;
}
if(jsEvent.title == undefined)
{
var createEvent = prompt('Event Title:','',{
buttons: {
Ok: true,
Cancel: false
}
});
}
else
{
var createEvent = prompt('Event Title:', jsEvent.title, {
buttons:
{
Ok: true,
Cancel: false
}
});
}
if (createEvent)
{
jsEvent.title = createEvent;
calendar.fullCalendar('renderEvent', { title: jsEvent.title, start: date, allDay: false, editable: true}, true );
}
eventEdit = true;
},
eventClick: function(calEvent, jsEvent, view)
{
if(eventEdit)
{
$('.ui-dialog').hide();
eventEdit = false;
}
var timing = $('.fc-event-time').html();
var dialog = $('<p class="event" align="justify">Event:'+calEvent.title+'<br/>Timing:'+timing+'</p>').dialog
({
buttons:
{
"Edit Event": function()
{
dialog.dialog('close');
var editEvent = prompt('Event Title:', calEvent.title, {
buttons:
{
Ok: true,
Cancel: false
}
});
if (editEvent)
{
calEvent.title = editEvent;
calendar.fullCalendar('updateEvent',calEvent);
}
},
"Delete Event": function()
{
calendar.fullCalendar('removeEvents', calEvent._id);
dialog.dialog('close');
}
}
});
eventEdit = true;
},
header:
{
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay"
}
});

Develop Reference

JavaScript is the programming language of the Web.

Fullcalendar: How to dynamically bind/add events with angularjs - javascript

Related

FullCalendar error : Uncaught TypeError: calendar.fullCalendar is not a function

How to unselect one and multiple selected date in Fullcalendar?

FullCalendar timezone not working

Creating grid using gridx of dojo

Display popup like google calendar

Categories

Resources