calendar/app/views/admin/calendars/_form.html.erb

<%= javascript_include_tag 'jquery.base64' %>
<style type="text/css">
  .controls[data-toggle^="buttons-"] input[type="checkbox"] {
    margin-left: 0;
    margin-top: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
  }
  .controls[data-toggle^="buttons-"] .checkbox.inline.btn{
    position: relative;
  }
  div[contentEditable=true]:empty:before{
    content: attr(data-ph);
    color: grey;
    padding-left: 3%;
    font-weight: bold;
    font-family: serif;
  }
  div[contentEditable=true] {
    background: white;
    color: black;
    border: 0.1em solid #cccccc;
    font-size: 1.15em;
    padding: 0.3em 0 0.3em 3%;
    border-radius: 0.3em;
    display: block;
    width: 100%;
    outline: 0;
  }
  div[contentEditable=true]:focus {
    border-color: rgba(82, 168, 236, 0.8);
    outline: 0;
    outline: thin dotted \9;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  }
</style>
<% if @event.errors.any? %>
  <div id="error_explanation">
    <h2><%= pluralize(@event.errors.count, "error") %> prohibited this event from being saved:</h2>
    <ul>
      <% @event.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
    </ul>
  </div>
<% end %>
<div class="control-group">
  <%= f.label t("title"), :class=>"control-label" %>
  <div class="controls">
    <div data-ph="<%= t('calendar.press_enter') %>" contenteditable="true" class="calendar-comment"><%= @event.title.to_s.html_safe %></div>
    <%= f.hidden_field :title %>
  </div>
</div>
<div class="control-group">
  <%= f.label t("calendar.note"), :class=>"control-label" %>
  <div class="controls">
    <div data-ph="<%= t('calendar.press_enter') %>" contenteditable="true" class="calendar-comment"><%= @event.note.to_s.html_safe %></div>
    <%= f.hidden_field :note %>
  </div>
</div>
<div class="control-group">
  <%= f.label t("url"), :class=>"control-label" %>
  <div class="controls">
    <%= f.text_field :url %>
  </div>
</div>
<div class="control-group">
  <label class="control-label"></label>
  <div class="controls">
    <label>
      <%= f.check_box :all_day,:id=>"all_day_check", :checked => @all_day %> <%= t('calendar.all_day') %>
    </label>
  </div>
</div>
<% data_format = (@event.all_day || @event.new_record?) ? 'yyyy/MM/dd' : 'yyyy/MM/dd hh:mm' %>
<div class="control-group">
  <%= f.label t("start_date"), :class=>"control-label" %>
  <%#= f.datetime_select :start %>
  <div class="controls">
    <%= f.datetime_picker :start, :class => "input-large", data: {"fv-validation" => "required;","fv-messages" => "Cannot be empty;"}, :placeholder => data_format, :new_record => false, :format => data_format %>
  </div>
</div>
<div class="control-group">
  <%= f.label t("end_date"), :class=>"control-label" %>
  <%#= f.datetime_select :end %>
  <div class="controls">
    <%= f.datetime_picker :end, :class => "input-large", :placeholder => data_format, :new_record => false, :format=> data_format %>
  </div>
</div>
<div class="control-group">
  <%= f.label t("calendar.calendar"), :class=>"control-label" %>
  <div class="controls">
    <%= f.select :calendar_type_id, @categories.collect{|t| [ t.title, t.id ]} %>
  </div>
</div>
<!-- Tag Module -->
<div class="control-group">
  <label class="control-label"><%= t(:tags) %></label>
  <%= select_tags(f, @module_app) %>
</div>

<div class="control-group">
  <label class="control-label"></label>
  <div class="controls">
    <label>
      <%= f.check_box :recurring, :id=>"recurring_checkbox", :checked => @recurring %> <%= t("calendar.recurring") %>
    </label>
  </div>
</div>
<div id="recurring_panel" <%= (@recurring ? '' : "style=display:none;") %> >
  <div class="control-group">
    <%=f.label :period, t("calendar.repeats"),:class=>"control-label" %>
    <div class="controls">
      <%=f.select :period, Event::REPEATS.map{|v| [t("calendar.#{v.downcase}"),v]},{},:class=>"span5" %>
    </div>
  </div>
  <div class="control-group">
    <%=f.label :frequency, "Every",:class=>"control-label" %>
    <div class="controls">
      <%=f.select :frequency, (1..30).to_a,{},:class=>"span2" %>
    </div>
  </div>
</div>

<div class="control-group last">
  <div class="controls">
    <% if action_name == "edit" %>
     <%= f.button t("calendar.save"),:type=> 'button', :class=>"btn btn-primary", :onclick => 'before_submit(this)' %>
     <% else %>
     <%= f.button t(:create_),:type=> 'button', :class=>"btn btn-primary", :onclick => 'before_submit(this)' %>
     <% end %>
    <a href="" class="btn btn-close">Cancel</a>
  </div>
</div>
<script type="text/javascript">
  function getFormData($form){
    var unindexed_array = $form.serializeArray();
    var indexed_array = {};

    $.map(unindexed_array, function(n, i){
        indexed_array[n['name']] = n['value'];
    });

    return indexed_array;
  }
  function before_submit(ele){
    var self = $(ele).parents('form')
    var length = self.find('*[contenteditable="true"]').length
    for (var i=0;i<length;i++){
      var tp1 = self.find('*[contenteditable="true"]').eq(i)
      var tp2 = tp1.parents('.controls').eq(0).find('input[type="hidden"]')
      tp2.val(tp1.html())
    }
    self.submit()
  }
  $('body').ready(function(){
    if ($('.default_picker,.time_picker,.date_picker').find('input').length!=0){
      $('.default_picker,.time_picker,.date_picker').find('.iconbtn').css('display','none')
      $('.default_picker,.date_picker').each(function(i,v){
        v = $(v).find('input')[0]
        $(v).attr('autocomplete','off')
        var org_format = $(v).data('format')
        var format = org_format.toLowerCase().replace(/yyyy/,'yy')
        var H_flag = false
        if (org_format.search(/tt|H/)!= null ){
          H_flag = true
        }
        var M_flag = false
        if (org_format.match(/[hH].*M/)!=null){
          M_flag = true
        }
        if (format.search(/h/)!= -1){
          var result = format.match(/\W+[?=h]/)
          if (result == null){
            result = format.match(/h/)
          }
          var indice = result.index
          var dateformat = format.slice(0,8)
          var time_format_start = format.search(/h/)
          var time_format = format.slice(time_format_start)
          if (H_flag){
            time_format = time_format.replace(/h/g,'H')
          }
          if (M_flag){
            time_format = time_format.replace(/m/g,'M')
          }
          $(v).ui_datetimepicker({
            dateFormat: dateformat,
            controlType: 'select',
            timeInput: true,
            oneLine: true,
            timeFormat: time_format
            })
        }else{
          var show_view = ''
          if (format.split(/\W/).slice(-1)[0].slice(-1)[0]=='m'){
            show_view = 'month'
          }
          if (format.split(/\W/).slice(-1)[0].slice(-1)[0]=='y'){
            show_view = 'year'
          }
          $(v).ui_datepicker({dateFormat: format,show_view: show_view})
        }
      })
      $('.default_picker,.time_picker,.date_picker').find('.clearDate').click(function(){
        $(this).parents('.default_picker,.time_picker,.date_picker').eq(-1).find('input').val('')
        $(this).parents('.default_picker,.time_picker,.date_picker').eq(-1).find('input').trigger('change')
      })
      $('.time_picker input').each(function(i,v){
        $(v).ui_timepicker({timeFormat: $(v).data('format'),
          controlType: 'select',
            timeInput: true,
            oneLine: true})
      })
      $('.separated_picker').find('.date_picker,.time_picker').find('input').change(function(){
        var parent_div = $(this).parents('.separated_picker').eq(-1)
        var date_picker_value = parent_div.find('.date_picker>input').val()
        var time_picker_value = parent_div.find('.time_picker>input').val()
        if (date_picker_value == '' || time_picker_value == ''){
          parent_div.children('input[type=hidden]').val('')
        }
        else{
          parent_div.children('input[type=hidden]').val(date_picker_value+' '+time_picker_value)
        }
      })
    }
    $('.simple-date-picker').find('input[type="text"],select').change(function(){
      var parent_div = $(this).parents('.simple-date-picker').eq(-1)
      var year = parent_div.find('.span3').val()
      var month = parent_div.find('.span2').val()
      var day = parent_div.find('.span1').val()
      if (year != '' && month != '' && day != ''){
        parent_div.find('input[type="hidden"]').eq(-1).val(year+'-'+month+'-'+day)
      }
    })
  })
</script>