{"id":409,"date":"2015-06-24T08:41:20","date_gmt":"2015-06-24T06:41:20","guid":{"rendered":"http:\/\/blog.thecodecampus.de\/?p=409"},"modified":"2026-02-20T08:48:08","modified_gmt":"2026-02-20T07:48:08","slug":"creating-of-a-hybrid-webapp-calendar-for-trello","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/creating-of-a-hybrid-webapp-calendar-for-trello\/","title":{"rendered":"Creating of a hybrid Webapp &#8211; Calendar for Trello"},"content":{"rendered":"<p>Due the missing feature of Trello to show cards beyond all boards in the same calendar we decided to help ourselves and started developing our own application that would fits in smoothly in our own workflow. Main goal was to achieve a simple calendar view and not to replace any features Trello already provides. In addition to a browser version, there is a mobile version that may be deployed to Android, iOS and Windows Phone via\u00a0Cordova.<\/p>\n<h2><em>Cordova + Ionic\u00a0<\/em><strong>\u00a0or\u00a0\u00a0<\/strong><em>Cordova + Angular Material<\/em><\/h2>\n<p>The calendar was intended to be made with Ionic, Bootstrap and AngularJS. Halfway through the development Ionic and Bootstrap were replaced by Angular Material. The switching to and the development with Angular Material was very fluently since the framework provides a huge load of directives that could easily be connected to the internal application services which provide the calculation\u00a0of the calendar and api features.<\/p>\n<h2><strong>Differ App\u00a0and Browser<\/strong><\/h2>\n<p>The real challenge is that even with a hybrid application there are a few restrictions across the devices. Performance, screen width or resolution may vary extremely. Therefore it may be appropriate to use various templates and functions. To detect whether the app is running in a browser window or in a mobile WebView (Cordova App) you can simply parse\u00a0the protocol. Either it is \u201chttp\/https\u201d for browser or \u201cfile\u201d for Cordova.<\/p>\n<p>Angular code to check whether its browser or Cordova:<\/p>\n<pre class=\"lang:js decode:true\">\u00a0\u00a0\u00a0module.run(\/*ngInject*\/ function ( $location, $rootScope) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if($location.$$protocol !== 'http') {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$rootScope.mobil = true;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0});<\/pre>\n<p>&nbsp;<\/p>\n<h2><b>Mobile Performance<\/b><\/h2>\n<p>Since the application was terrible slow when running as Cordova app we did some resaerch. While calculating the whole year in javascript was very fast, the painting of a single month would be very slow. But only for the cordova application, running the app in chrome on mobile devices shows no performance issues. To speed the painting process up the DOM-Elements were reduced. To reduce the AngularJS watches and speed up the digest cycle some bindings were replaced by one-time-bindings.<\/p>\n<h2><b>Error Logging<\/b><\/h2>\n<p>To receive errors that appear on the (remote) client side <a href=\"https:\/\/github.com\/getsentry\/sentry\" target=\"_blank\" rel=\"noopener\">Sentry<\/a> is connected to the the application trough RavenJS. Any occuring error will be logged to a Sentry instance running on one of our servers. Since the application is minified there will be a source map generated when building the application (this feature is provided by fabs, see build tools for more information about fabs), Sentry will parse the sourcemap and display the unminified line of code.<\/p>\n<h2><b>Build System<\/b><\/h2>\n<p>For developing the application <a href=\"https:\/\/github.com\/w11k\/fabs\" target=\"_blank\" rel=\"noopener\">fabs (Fabulous AngularJS Build System)<\/a> is used. Its a grunt based build system for AngularJS applications and integrates very well with cordova. It provides many features such as LiveReload, Annotating your dependencies or minify CSS and JS files.<\/p>\n<h2><b>Conclusion<\/b><\/h2>\n<p>Angular Material replaces three components (Ionic, Bootstrap and AngularUI-Bootstrap) but is still under heavy development. This means you are going to have to deal with some breaking changes while developing your application. In return Angular Material offers a lot of components and aims implementation of the full Material Design specification.<\/p>\n<p>Ionic does not provide any magic and may be replaced by Angular Material. Basic essential is Cordova with its plugins to connect your app to the native features of a mobile device. Ionic provides <em><a href=\"http:\/\/ngcordova.com\/\" target=\"_blank\" rel=\"noopener\">ngCordova<\/a><\/em> which has a lot of great angular wrappers for those &#8211; but there is no ionic needed to run them with your application!<\/p>\n<p>The source code of our Calendar is open source, furthermore we have a hosted version:<\/p>\n<p><a href=\"https:\/\/github.com\/w11k\/calendar-for-trello\" target=\"_blank\" rel=\"noopener\">Github Repository<\/a><\/p>\n<p>Calendar for Trello<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Due the missing feature of Trello to show cards beyond all boards in the same calendar we decided to help ourselves and started developing our own application that would fits in smoothly in our own workflow. Main goal was to achieve a simple calendar view and not to replace any features Trello already provides. In [&#8230;]<br \/><a class=\"meta-big\" href=\"https:\/\/www.thecodecampus.de\/blog\/creating-of-a-hybrid-webapp-calendar-for-trello\/\"> READ MORE<\/a><\/p>\n","protected":false},"author":29,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[57,62,56,55],"class_list":["post-409","post","type-post","status-publish","format-standard","hentry","category-angularjs","tag-angular-material","tag-angularjs","tag-cordova","tag-trello"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Calendar for Trello - creating of a hybrid Webapp<\/title>\n<meta name=\"description\" content=\"Elevate productivity with our hybrid web app calendar for Trello. Seamlessly integrate tasks, boost efficiency, and conquer deadlines effortlessly.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.thecodecampus.de\/blog\/creating-of-a-hybrid-webapp-calendar-for-trello\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Calendar for Trello - creating of a hybrid Webapp\" \/>\n<meta property=\"og:description\" content=\"Elevate productivity with our hybrid web app calendar for Trello. Seamlessly integrate tasks, boost efficiency, and conquer deadlines effortlessly.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thecodecampus.de\/blog\/creating-of-a-hybrid-webapp-calendar-for-trello\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development tips and tricks - theCodeCampus Blog\" \/>\n<meta property=\"article:published_time\" content=\"2015-06-24T06:41:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-20T07:48:08+00:00\" \/>\n<meta name=\"author\" content=\"theCodeCampus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"theCodeCampus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/creating-of-a-hybrid-webapp-calendar-for-trello\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/creating-of-a-hybrid-webapp-calendar-for-trello\\\/\"},\"author\":{\"name\":\"theCodeCampus\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/276bbda2f8da73154f22fb652201cfbc\"},\"headline\":\"Creating of a hybrid Webapp &#8211; Calendar for Trello\",\"datePublished\":\"2015-06-24T06:41:20+00:00\",\"dateModified\":\"2026-02-20T07:48:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/creating-of-a-hybrid-webapp-calendar-for-trello\\\/\"},\"wordCount\":577,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"keywords\":[\"Angular Material\",\"AngularJS\",\"Cordova\",\"Trello\"],\"articleSection\":[\"AngularJS 1\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/creating-of-a-hybrid-webapp-calendar-for-trello\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/creating-of-a-hybrid-webapp-calendar-for-trello\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/creating-of-a-hybrid-webapp-calendar-for-trello\\\/\",\"name\":\"Calendar for Trello - creating of a hybrid Webapp\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\"},\"datePublished\":\"2015-06-24T06:41:20+00:00\",\"dateModified\":\"2026-02-20T07:48:08+00:00\",\"description\":\"Elevate productivity with our hybrid web app calendar for Trello. Seamlessly integrate tasks, boost efficiency, and conquer deadlines effortlessly.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/creating-of-a-hybrid-webapp-calendar-for-trello\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/creating-of-a-hybrid-webapp-calendar-for-trello\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/creating-of-a-hybrid-webapp-calendar-for-trello\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating of a hybrid Webapp &#8211; Calendar for Trello\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"name\":\"Web Development tips and tricks - theCodeCampus Blog\",\"description\":\"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\",\"name\":\"theCodeCampus\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"width\":156,\"height\":156,\"caption\":\"theCodeCampus\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/276bbda2f8da73154f22fb652201cfbc\",\"name\":\"theCodeCampus\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg\",\"caption\":\"theCodeCampus\"},\"description\":\"Our knowledge is not simply gained through reading - it is trained, tested and constantly being expanded. Because first and foremost, we are all developers at W11K. The know-how that we acquire here as developers, consultants and information architects flows immediately into our training courses and articles for theCodeCampus.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/showcase\\\/thecodecampus\\\/\"],\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Calendar for Trello - creating of a hybrid Webapp","description":"Elevate productivity with our hybrid web app calendar for Trello. Seamlessly integrate tasks, boost efficiency, and conquer deadlines effortlessly.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.thecodecampus.de\/blog\/creating-of-a-hybrid-webapp-calendar-for-trello\/","og_locale":"en_US","og_type":"article","og_title":"Calendar for Trello - creating of a hybrid Webapp","og_description":"Elevate productivity with our hybrid web app calendar for Trello. Seamlessly integrate tasks, boost efficiency, and conquer deadlines effortlessly.","og_url":"https:\/\/www.thecodecampus.de\/blog\/creating-of-a-hybrid-webapp-calendar-for-trello\/","og_site_name":"Web Development tips and tricks - theCodeCampus Blog","article_published_time":"2015-06-24T06:41:20+00:00","article_modified_time":"2026-02-20T07:48:08+00:00","author":"theCodeCampus","twitter_card":"summary_large_image","twitter_misc":{"Written by":"theCodeCampus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.thecodecampus.de\/blog\/creating-of-a-hybrid-webapp-calendar-for-trello\/#article","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/creating-of-a-hybrid-webapp-calendar-for-trello\/"},"author":{"name":"theCodeCampus","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/276bbda2f8da73154f22fb652201cfbc"},"headline":"Creating of a hybrid Webapp &#8211; Calendar for Trello","datePublished":"2015-06-24T06:41:20+00:00","dateModified":"2026-02-20T07:48:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/creating-of-a-hybrid-webapp-calendar-for-trello\/"},"wordCount":577,"commentCount":0,"publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"keywords":["Angular Material","AngularJS","Cordova","Trello"],"articleSection":["AngularJS 1"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.thecodecampus.de\/blog\/creating-of-a-hybrid-webapp-calendar-for-trello\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.thecodecampus.de\/blog\/creating-of-a-hybrid-webapp-calendar-for-trello\/","url":"https:\/\/www.thecodecampus.de\/blog\/creating-of-a-hybrid-webapp-calendar-for-trello\/","name":"Calendar for Trello - creating of a hybrid Webapp","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#website"},"datePublished":"2015-06-24T06:41:20+00:00","dateModified":"2026-02-20T07:48:08+00:00","description":"Elevate productivity with our hybrid web app calendar for Trello. Seamlessly integrate tasks, boost efficiency, and conquer deadlines effortlessly.","breadcrumb":{"@id":"https:\/\/www.thecodecampus.de\/blog\/creating-of-a-hybrid-webapp-calendar-for-trello\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thecodecampus.de\/blog\/creating-of-a-hybrid-webapp-calendar-for-trello\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.thecodecampus.de\/blog\/creating-of-a-hybrid-webapp-calendar-for-trello\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.thecodecampus.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating of a hybrid Webapp &#8211; Calendar for Trello"}]},{"@type":"WebSite","@id":"https:\/\/www.thecodecampus.de\/blog\/#website","url":"https:\/\/www.thecodecampus.de\/blog\/","name":"Web Development tips and tricks - theCodeCampus Blog","description":"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.","publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.thecodecampus.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.thecodecampus.de\/blog\/#organization","name":"theCodeCampus","url":"https:\/\/www.thecodecampus.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","width":156,"height":156,"caption":"theCodeCampus"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/276bbda2f8da73154f22fb652201cfbc","name":"theCodeCampus","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg","caption":"theCodeCampus"},"description":"Our knowledge is not simply gained through reading - it is trained, tested and constantly being expanded. Because first and foremost, we are all developers at W11K. The know-how that we acquire here as developers, consultants and information architects flows immediately into our training courses and articles for theCodeCampus.","sameAs":["https:\/\/www.linkedin.com\/showcase\/thecodecampus\/"],"url":"https:\/\/www.thecodecampus.de\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/409","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/comments?post=409"}],"version-history":[{"count":19,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/409\/revisions"}],"predecessor-version":[{"id":3630,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/409\/revisions\/3630"}],"wp:attachment":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/media?parent=409"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/categories?post=409"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/tags?post=409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}