cancel
Showing results for 
Search instead for 
Did you mean: 

how to integrate third party calendar api in sapui5 application

Former Member
0 Kudos

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

Accepted Solutions (0)

Answers (4)

Answers (4)

Former Member
0 Kudos

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.

Former Member
0 Kudos

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

juancarlosorta
Participant
0 Kudos

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

Former Member
0 Kudos

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

juancarlosorta
Participant
0 Kudos

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

juancarlosorta
Participant
0 Kudos

In this post I explain how to integrate a jquery calendar ( http://fullcalendar.io/ ) in a sapui5 application. I hope this can help you.

vinay_kumar313
Explorer
0 Kudos

Hi Juan,

Thank you so much . I was looking something similar last month but, met my requirement by extending existing control (sap.me.Calendar). Now I will try to implement your JQuery control in SAP UI5 Aplication.

Thanks,

Vinay

Former Member
0 Kudos

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

Former Member
0 Kudos

Can you please explain this code as i'm unable to understand this.

var oHTML = new sap.ui.core.HTML("kbdiv", {});

oHTML.setContent("<script>Keyboard_api.init(\"ecKeyboard\");

</script><div id=\"ecKeyboard\"></div>");


thank you

-Moulika

Former Member
0 Kudos

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.

Former Member
0 Kudos

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

Former Member
0 Kudos


Maybe its possible to send me some example code how the calendar api works? some example just in html and JavaScript without sapui5 so i can try to redesign it for sapui5?

its realy hard to do this just in my head ^^

Former Member
0 Kudos

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

vinay_kumar313
Explorer
0 Kudos

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