View Customization Options - Weekview and Dayview

[cryptomine14]

monthviewEventDetailTemplateUrl works for me but weekviewAllDayEventTemplateUrl seems to be not working or I'm just not using it well.. The default value says 'templates/rcalendar/displayEvent.html' and inside the calendar-tpls.js the directive is the entire weekview.. I think I'm just confused.. Help would be greatly appreciated.. :)

[twinssbc]

@cryptomine14 The calendar-tpls.js is already the dist file that inline the template into the js code. In the calendar-tpls code, it uses below code to configure the template cache so that it won't fetch the template from the separate file, just uses the inline code.

angular.module("templates/rcalendar/displayEvent.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("templates/rcalendar/displayEvent.html",
    "<div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>");
}]);

May I know how do you specify the weekviewAllDayEventTemplateUrl?

[cryptomine14]

Thank you for the immediate response @twinssbc !

<calendar ... weekview-all-day-event-template-url="weekviewAllDayEventTemplateUrl"> $scope.weekviewAllDayEventTemplateUrl = 'billWeekViewAllDayEvent.html';

In the templates the week.html is the part that I edited but when I specified it, it doesn't work.. I seem to be confused due to lack of sleep.. Can you specify how can I implement this? :)

[twinssbc]

@cryptomine14 Do you mean you modify the tpls file directly? If you set a customized template url, you should put your code in billWeekViewAllDayEvent.html.

[cryptomine14]

@twinssbc No because I can't implement a ng-if scenario if I modify the tpls file directly.. I copied the week.html from the templates/rCalendar, customized and bind it to the calendar but it doesn't work.. Can you provide a simple example on how to do it?

[twinssbc]

@cryptomine14 The default value of weekviewAllDayEventTemplateUrl option is displayEvent.html not weekview.html in teamplates/rCalendar directory.

Below is an example, add a html file in your project, myTemplate.html. The content is

<div class="calendar-event-inner">test{{displayEvent.event.title}}</div>

The HTML code to declare calendar

<calendar ...  weekview-all-day-event-template-url="weekviewAllDayEventTemplateUrl"></calendar>

In the controller code,

$scope.weekviewAllDayEventTemplateUrl = 'myTemplate.html';

[raghavendra-synapptra]

@twinssbc
How can I customize layout for week.html? Do I need to edit in calendar-tpls or any other way. Could you please help me on this?

[twinssbc]

@raghavendra-synapptra Take a look at the "View Customization Options" in README. It provides several week view templates allow you to customize.

[raghavendra-synapptra]

@twinssbc Thanks for the reply. In read me I could see customization option with respect to events. But i want to customize with respect to table structure. Could you please help me how I can proceed.

[twinssbc]

@raghavendra-synapptra OK, the customization option doesn't allow customizing the table structure. You will have to modify the source code, the week view code is in https://github.com/twinssbc/Ionic-Calendar/blob/master/templates/rcalendar/week.html

The tpls file is the generated file. I don't suggest modifying it directly, although you can. You could modify the week.html, then run grunt build-tpls, the tpls file will be updated automatically.

[raghavendra-synapptra]

@twinssbc Thanks for the reply. scrolling for week view and day view is very sensitive. When I try to scroll it will get slide. Is there any way to fix it?

Kindly find the below code

[twinssbc]

@raghavendra-synapptra It's not possible in this version. Also I suggest you upgrade to the new version, https://github.com/twinssbc/Ionic2-Calendar, which uses latest Ionic version. It has more options to customize and supports setting threshold to control when to trigger swiping.

[raghavendra-synapptra]

@twinssbc Thanks, But our existing app is in angularjs