diff --git a/app/assets/javascripts/app/controllers/layout_ref.js.coffee b/app/assets/javascripts/app/controllers/layout_ref.js.coffee
index 2d6c953f2..2a0f005a6 100644
--- a/app/assets/javascripts/app/controllers/layout_ref.js.coffee
+++ b/app/assets/javascripts/app/controllers/layout_ref.js.coffee
@@ -1428,4 +1428,77 @@ class searchableSelectRef extends App.ControllerContent
 
 App.Config.set( 'layout_ref/search_select', searchableSelectRef, 'Routes' )
 
+
+class calendarSubscriptionsRef extends App.ControllerContent
+
+  elements:
+    'input[type=checkbox]': 'options'
+    'output': 'output'
+
+  events:
+    'change input[type=checkbox]': 'onOptionsChange'
+    'click .js-select': 'selectAll'
+
+  constructor: ->
+    super
+    @render()
+
+  render: ->
+    @html App.view('layout_ref/calendar_subscription')
+
+  selectAll: (e) ->
+    e.currentTarget.focus()
+    e.currentTarget.select()
+
+  onOptionsChange: =>
+    optionCount = 3
+    data = @options.serializeArray()
+    modules = []
+    translationTable =
+      own: 'my'
+      not_assigned: 'not assigned'
+      new_open: 'new & open'
+      pending: 'pending'
+      escalating: 'escalating'
+
+    # check if there is any data
+    if data.length is 0
+      @output
+        .attr 'disabled', true
+        .text "No subscriptions active"
+      return
+
+    # check if all my tickets got selected
+    own = data.filter((entry) -> entry.name.indexOf('own') >= 0)
+    not_assigned = data.filter((entry) -> entry.name.indexOf('not_assigned') >= 0)
+
+    if own.length is optionCount
+      modules.push "all my"
+    else
+      modules.push.apply modules, own.map (entry) -> 
+        [option, value] = entry.name.split('/')
+        return "#{ translationTable[value] } #{ translationTable[option] }"
+
+    if not_assigned.length is optionCount
+      modules.push "all not assigned"
+    else
+      modules.push.apply modules, not_assigned.map (entry) -> 
+        [option, value] = entry.name.split('/')
+        return "#{ translationTable[value] } #{ translationTable[option] }"
+
+    @output
+      .attr 'disabled', false
+      .text "Subscription to #{ @joinItems modules } tickets:"
+
+  joinItems: (items) ->
+    switch items.length
+      when 1 then return items[0]
+      when 2 then return "#{ items[0] } and #{ items[1] }"
+      else 
+        return "#{ items.slice(0, -1).join(', ') } and #{ items[items.length-1] }"
+
+
+App.Config.set( 'layout_ref/calendar_subscription', calendarSubscriptionsRef, 'Routes' )
+
+
 App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', translate: true, target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' )
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/layout_ref/calendar_subscription.jst.eco b/app/assets/javascripts/app/views/layout_ref/calendar_subscription.jst.eco
new file mode 100644
index 000000000..a24e0916b
--- /dev/null
+++ b/app/assets/javascripts/app/views/layout_ref/calendar_subscription.jst.eco
@@ -0,0 +1,60 @@
+<div class="sidebar NavBarProfile">
+  <h2>Profile</h2>
+
+  <ul class="nav nav-pills nav-stacked">
+    <li><a href="#profile/language">Language</a></li>  
+    <li><a href="#profile/avatar">Avatar</a></li>  
+    <li><a href="#profile/password">Password</a></li>  
+    <li><a href="#profile/notifications">Notifications</a></li>
+    <li class="active"><a href="#profile/calendar">Calendar</a></li>  
+    <li><a href="#profile/linked">Linked Accounts</a></li>
+  </ul>
+</div>
+
+<div class="main flex">
+  <div class="page-header">
+    <div class="page-header-title">
+      <h1>Calendar</h1>
+    </div>
+  </div>
+  <h2>Ticket Subscriptions</h2>
+
+  <p>See your tickets from within your favorite calendar by adding the following <b>url</b> to your calendar app.</p>
+
+  <h3>Url</h3>
+  <div class="output-input">
+    <output class="js-output">Subscription to all my tickets:</output>
+    <input class="form-control js-select" readonly value="https://company.zammad.com/ical/tickets">
+  </div>
+
+  <h3>Settings</h3>
+  <table class="settings-list">
+    <thead>
+      <tr>
+        <th style="white-space: nowrap;">Status Type
+        <th colspan="2">Options
+        <th width="100%">Direct URL
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>new/open
+        <td><label class="inline-label"><input type="checkbox" name="new_open/own" checked> Own</label>
+        <td><label class="inline-label"><input type="checkbox" name="new_open/not_assigned"> Not Assigned</label>
+        <td><input class="form-control form-control--borderless js-select" readonly value="https://company.zammad.com/ical/tickets/new_open">
+      </tr>
+      <tr>
+        <td>pending
+        <td><label class="inline-label"><input type="checkbox" name="pending/own" checked> Own</label>
+        <td><label class="inline-label"><input type="checkbox" name="pending/not_assigned"> Not Assigned</label>
+        <td><input class="form-control form-control--borderless js-select" readonly value="https://company.zammad.com/ical/tickets/pending">
+      </tr>
+      <tr>
+        <td>escalating
+        <td><label class="inline-label"><input type="checkbox" name="escalating/own" checked> Own</label>
+        <td><label class="inline-label"><input type="checkbox" name="escalating/not_assigned"> Not Assigned</label>
+        <td><input class="form-control form-control--borderless js-select" readonly value="https://company.zammad.com/ical/tickets/escalating">
+      </tr>
+    </tbody>
+  </table>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/layout_ref/index.jst.eco b/app/assets/javascripts/app/views/layout_ref/index.jst.eco
index 1593b38b8..facb2a3e4 100644
--- a/app/assets/javascripts/app/views/layout_ref/index.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/index.jst.eco
@@ -4,6 +4,7 @@
 
 
   <ul>
+    <li><a href="#layout_ref/calendar_subscription">Calendar Subscription</a></li>
     <li><a href="#layout_ref/search_select">Searchable Select</a></li>
     <li><a href="#layout_ref/schedulers">Schedulers</a></li>
     <li><a href="#layout_ref/sla">Service Level Agreements</a></li>
diff --git a/app/assets/stylesheets/bootstrap.css b/app/assets/stylesheets/bootstrap.css
index 0e569dc1d..c0f58c00f 100644
--- a/app/assets/stylesheets/bootstrap.css
+++ b/app/assets/stylesheets/bootstrap.css
@@ -1726,7 +1726,6 @@ output {
   color: #999;
 }
 .form-control[disabled],
-.form-control[readonly],
 fieldset[disabled] .form-control {
   cursor: not-allowed;
   background-color: #eee;
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index 842cdd91c..68427f024 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -886,14 +886,24 @@ input[type=time] {
     padding-right: 34px;
   }
 
-  .form-control[disabled],
-  .form-control[readonly] {
+  .form-control[disabled] {
     cursor: not-allowed;
     background-color: #fff;
     color: #d5d5d5;
     opacity: 1;
   }
 
+  .form-control.form-control--borderless {
+    border: none;
+    padding: 0;
+    line-height: inherit;
+    height: auto;
+    
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
   .form-control + .icon-arrow-down  {
     position: absolute;
     right: 12px;
@@ -5305,12 +5315,41 @@ label + .wizard-buttonList {
   }
 }
 
+.output-input {
+  display: flex;
+  margin: 0 0 14px;
+  
+  output {
+    margin: 0;
+    border-radius: 3px 0 0 3px;
+    border: 1px solid hsl(200,71%,59%);
+    border-right: none;
+  }
+  
+  input {
+    flex: 1;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left: none;
+    
+    &:focus {
+      border-color: hsl(0,0%,90%);
+      box-shadow: none;
+    }
+  }
+}
+
 output {
   border-bottom: 1px solid hsl(200,71%,59%);
   margin: 14px 0 0;
   display: inline-block;
-  padding: 10px 20px;
+  padding: 10px 12px 8px;
   background: hsl(201,62%,93%);
+  
+  &[disabled] {
+    border-color: hsl(358,53%,56%);
+    background: hsl(358,53%,76%);
+  }
 }
 
 .horizontal-filter-text {
@@ -5382,6 +5421,8 @@ output {
 
 .settings-list {
   border-collapse: separate;
+  color: hsl(60,1%,34%);
+  background: white;
   
   &:not(:last-child) {
     margin-bottom: 34px;