How to set an event

[Pyraminds]

You displayed some random events, but I want my own events to be displayed. How can I set my own events.

[twinssbc]

@Pyraminds

As you can see in the demo source code, the random events are assigned to $scope.calendar.eventSource which is bound to event-source attribute when declaring the calendar directive.

$scope.calendar.eventSource = createRandomEvents();

You just need to fill the eventSource with your own events. Btw, the calendar supports two query modes, local and remote. The demo source code is using local mode, so you just assign the eventSource variable once. In a real application, you probably will fetch events from the server side. Then you need to use the remote mode, and you need to set the eventSource in the rangeChanged callback. You can get more information from the README. Thanks.

[Pyraminds]

Thanks for your reply.But I am new to ionic and angular , if you provide one own event with an example,it would be grateful to me.

[Pyraminds]

@twinssbc

Thanks i have followed you instruction for integrating this into my existing app, i didn't get any output ,only blank screen is opened there is nothing other than that.please help me with the above and this issue.

thanks a lot for your help.

[twinssbc]

@Pyraminds This createRandomEvents just populate the events with some random string. You just need to set the event using your own data. You can get the event field according to README.

Regarding your blank screen issue, could you provide your code so that I can know how do you use this calendar? Also is there any error printed in the console?

[Pyraminds]

@twinssbc

Thanks For your Response events [] i changed to like this `var events = [{ title:'meeting', startTime:'new Date(Date.UTC(2016, 9, 29))', endTime:'new Date(Date.UTC(2016,9, 29))', allDay: true }, { title:'birthday', startTime:'new Date(Date.UTC(2016, 10, 1))', endTime:'new Date(Date.UTC(2016,10, 2))', allDay: true

       }
     ];`

this is my calendar.html file `

`

and this is my index.html

I have given the correct path to the css and js files

`

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<link rel="stylesheet" href="lib/ionic-calendar/dist/css/calendar.css"/>

<!-- cordova script (this will be a 404 during development) -->
<script src="js/ng-cordova.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<!-- your app's js -->

<script src="lib/ionic-calendar/dist/js/calendar-tpls.js"></script>`

this is the optput

[Pyraminds]

@twinssbc i added my own events to your app i am getting it.but when coming to integrating into my app blank space coming instead of calendar.

[twinssbc]

@Pyraminds When you open the browser dev toolbar, is there any error displayed in the console? If you put some divs before and after the , are these divs displayed correctly? Could you use browser dev toolbar to hover on the elements to see if their height are set properly?

[Pyraminds]

@twinssbc

There is no error in console , and the other content placed in the calendar.html file is displayed fine.

below is the screenshot for the output

i dont everything in my app the only thing left is calendar part.so please get me out of it.

[twinssbc]

@Pyraminds Could you check what's the height of the calendar DOM element in calendar.html?

[Pyraminds]

I don't know how to check the height of the calendar.

[twinssbc]

@Pyraminds In your browser dev tools, you can hover on a DOM element and it will display the property of that DOM element.

[Pyraminds]

I didn't get the property for calendar DOM element as shown in the below screenshot .

[twinssbc]

@Pyraminds If you switch to the Computed tab, could you find the height property of the DOM element? Could you provide the full html code of that view? Apparently you have card layout elements also in this view.