on 02-25-2015 7:01 AM
Hi Friends,
I'm working on application in which I want to Integrate a Third Party Calendar API into my application. If anyone has some insights on this topic please help me.
What I want to know is,
1.Where should we start the integration and how?
2.Do I need to add any Libraries for that? example : jQuery etc..
3.I have created a View in my application in which I want this calendar api.
Please help in achieving this.
Thanks In Advance
-Moulika
Hi Moulika,
Have you get the jquery calendar in your app?
I am also working on same thing But not able to add third party jQuery calendar.
Thanks,
Dhiraj.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Juan,
i followed you post its very usefull
i am not getting any error. but its not diplaying calendar
my view looks like this.
createContent : function(oController) {
var myDivCalendar = '<div id="calendar"></div>';
var myhtml = new sap.ui.core.HTML();
myhtml.setContent(myDivCalendar);
}
and my controller page looks like this
onAfterRendering:function(){
$(document).ready(function(){
$('#calendar').fullCalendar({
dragOpacity: {
month: .2,
'default': .5
}
});
});
is i am missing something here.
is error any way we can find the json data to the calendar
if possible can you please guide me on this
Thanks
Adarsh
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Remember that you must return the HTML control in the view to display it.
For example:
calendar.view.js
sap.ui.jsview("view.calendar", {
getControllerName : function() {
return "view.calendar";
},
createContent : function(oController) {
.......
var myDivCalendar = '<div id="calendar"></div>';
var myhtml = new sap.ui.core.HTML();
myhtml.setContent(myDivCalendar);
.......
return new sap.m.Page( {
title: "MyCalendar",
content: [
myhtml
]
})
})
}
Also be sure you load in the index.html these files (necessary libraries for running the calendar).
<link rel='stylesheet' href='css/fullcalendar.css' />
<script src='js/moment.min.js'></script>
<script src='js/fullcalendar.js'></script>
<script src='js/en.js'></script>
Hope this help you.
Regards
Hi, Juan,
Thanks for reply.
i finally figured, i need to add content to the page.
return new sap.m.Page( {
title: "MyCalendar",
content: [
myhtml
]
})
One more question,
in controller page.
var a = moment().format('YYYY-MM-DD'); |
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: a, //'2014-06-12',
defaultView: 'month',
editable: true,
events: [
{
title: 'All Day Event',
start: '2016-09-28'
},
{
title: 'Long Event',
start: '2015-09-28',
end: '2015-09-29'
},
]});
},
As you can see i added 2 events, but thats static if i want that to be dynamic. coming from oData.
how it can done.
Please give me some insight on this.
Regards
Adarsh
Hi Adarsha,
the following code shows how I do it for create events based on a model.
var oModelCal = this.getView().getModel("DataCalendar")
for (i=0;i<oModelCal.getProperty("/Events").length;i++){
var evtype = oModelCal.getProperty("/Events/"+i+"/type");
var description= oModelCal.getProperty("/Events/"+i+"/description");
.................
var event={
id: i,
title: description,
type: evtype
};
$('#calendar').fullCalendar('renderEvent',event,true);
}
You can consult the official documentation for details:
http://fullcalendar.io/docs/event_data/events_function/
Documentation | FullCalendar (Events)
Regards
Juan Carlos
In this post I explain how to integrate a jquery calendar ( http://fullcalendar.io/ ) in a sapui5 application. I hope this can help you.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Moulika,
first you should copy the library in the sapui5 main resources Folder.
For example resources/mylib/Keyboard_api.js
Than u Need to say jquery you want to use it in view
jQuery.sap.require("mylib.Keyboard_api");
Now you can add your html to the view like
var oHTML = new sap.ui.core.HTML("kbdiv", {});
oHTML.setContent("<script>Keyboard_api.init(\"ecKeyboard\");
</script><div id=\"ecKeyboard\"></div>");
Or you can add the api to your index.html file like
<script src="/xxxext/com/xxx/sapui5/propertyManager/PropertyManager.js"></script>
and initialize before initializing the view. now you should be able to use the api.
Hope this will help you
Regards
Sascha
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Moulika,
its like injecting html code in the sapui5 generated code. You can create a HTML object and set its Content with html you wish to place in your view.
if you inject the <script></script> htmltags you can also run JavaScript at initialization in my case i run an method init("DivName") in my thirdparty js lib.
This function generate some html and set the generated Content in the div with id ecKeyboard.
I dont know your lib and what methods were included so.
its a littlebit like the movie inception you inject the div and the script which injects html in the generated html ^^
Sorry but i dont know how to explain this a better way.
In most cases you Need a div to inject the api generated code in.
Okay,
i understood a little bit, should write this code in my controller?
i'm having my application as when click a tile i should load this calendar. I have written a div in my calendar.view.html with an ID calendar. I have loaded "jQuery.sap.require("calendar.fullcalendar");" in my controller.
please help me in achieving this.
-Moulika
Hi Sascha,
I have attached an image in my question I need that in sapui5. I have downloaded a third party Calendar api with the same functionality. In that api project I have one JS fine and multiple CSS files.
Do i need to inject that JS file into my controller??
Is there any way that i could send you the files.?
thanks in advance
-Moulika
Hi Moulika,
I am curious to know, if you have integrated calendar control into any SAPUI5 application. I had some requirement earlier but I extended standard control by referring below link.
http://scn.sap.com/thread/3521638
Please let me know, if you have integrated it and would be a nice learning for me.
Thanks,
Vinay
User | Count |
---|---|
83 | |
24 | |
12 | |
9 | |
7 | |
6 | |
5 | |
5 | |
5 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.