Some calendar updates

This commit is contained in:
Harry Bomrah 2012-09-17 04:34:03 +08:00
parent 9491945fd4
commit 221ffc08dd
10 changed files with 210 additions and 132 deletions

View File

@ -19,10 +19,18 @@ var calendarAPI = function(){
}) })
$("#create_event_btn").click(function(){ $("#create_event_btn").click(function(){
c.newEvent($(this)); if(!$(this).hasClass("active")){
c.newEvent($(this).attr("href"),$(this).attr("ref"),c.today.getDate(),c.today.getMonth()+1,c.today.getFullYear());
}else{
c.event_create_div.hide().empty();
}
$(this).toggleClass("active"); $(this).toggleClass("active");
return false; return false;
}) })
$("td.click_event").live("click",function(){
c.newEvent($(this).attr("link"),$(this).attr("ref"),$(this).attr("date"),c.cur_month,c.cur_year);
$("#create_event_btn").toggleClass("active");
})
$('.mode_switch').click(function(){ $('.mode_switch').click(function(){
var target = $(this).text(); var target = $(this).text();
@ -79,6 +87,7 @@ var calendarAPI = function(){
c.cur_month = month; c.cur_month = month;
c.cur_year = year; c.cur_year = year;
$('#view_holder').load("cals/month_view?month="+month+"&year="+year, function() { $('#view_holder').load("cals/month_view?month="+month+"&year="+year, function() {
getEvents(month,year);
$('.current_day_title').text(c.monthlist[c.cur_month]+" "+c.cur_year); $('.current_day_title').text(c.monthlist[c.cur_month]+" "+c.cur_year);
if($('#calendar_month').length > 0){ if($('#calendar_month').length > 0){
var $c_table = $('#calendar_month'); var $c_table = $('#calendar_month');
@ -102,6 +111,37 @@ var calendarAPI = function(){
}); });
} }
}) })
var getEvents = function(month,year){
$.getJSON("cals/getEvents",{"type":"monthview","month":month,"year":year},function(events){
var $eventrow = $("<tr></tr>");
var currow = 1;
var curpos = 1;
$.each(events,function(i,evnt){
var daydom = $("#calendar_month td[date="+evnt.start_date+"]");
var curparent = daydom.parent().parent().parent();
var thisrow = curparent.attr("row");
var pos = daydom.attr("position");
if(thisrow != currow){
$eventrow = null;
$eventrow = $("<tr></tr>");
}else if(pos == curpos){
$eventrow = null;
$eventrow = $("<tr></tr>");
}
if(pos == 1){
$eventrow.html('<td colspan="'+evnt.total_days+'"><div class="event" style="background-color: '+evnt.color+';">'+evnt.title+'</div></td>');
}else{
if($eventrow.html()==""){
$eventrow.append('<td colspan="'+(pos-1)+'">');
}
$eventrow.append('<td colspan="'+evnt.total_days+'"><div class="event" style="background-color: '+evnt.color+';">'+evnt.title+'</div></td>');
}
currow = thisrow;
curpos = pos;
curparent.append($eventrow);
})
})
}
} }
this.loadWeekView = function(){ this.loadWeekView = function(){
$('#view_holder').load("cals/week_view", function() { $('#view_holder').load("cals/week_view", function() {
@ -118,11 +158,11 @@ var calendarAPI = function(){
$('.current_day_title').text('September 2, 2012'); $('.current_day_title').text('September 2, 2012');
}) })
} }
this.newEvent = function(dom){ this.newEvent = function(url,ref,date,month,year){
var bindHandlers = function(){ var bindHandlers = function(){
c.event_create_div.find("button.btn-close").click(function(){ c.event_create_div.find("button.btn-close").click(function(){
c.event_create_div.hide().empty(); c.event_create_div.hide().empty();
dom.removeClass("active"); $("#create_event_btn").removeClass("active");
}) })
c.event_create_div.find("input[for=all_day][type=checkbox]").click(function(){ c.event_create_div.find("input[for=all_day][type=checkbox]").click(function(){
if($(this).is(":checked")) if($(this).is(":checked"))
@ -131,14 +171,12 @@ var calendarAPI = function(){
c.event_create_div.find("#non_all_day").show() c.event_create_div.find("#non_all_day").show()
}) })
} }
if(!dom.hasClass("active")){
c.event_create_div.load(dom.attr("href"),function(){ c.event_create_div.load(url+"?ref="+ref+"&date="+date+"&month="+month+"&year="+year,function(){
c.event_create_div.show(); c.event_create_div.show();
bindHandlers(); bindHandlers();
}) })
}else{
c.event_create_div.hide().empty();
}
} }
this.newCalendars = function(){ this.newCalendars = function(){
if($('.color-picker').length > 0){ if($('.color-picker').length > 0){

View File

@ -55,4 +55,23 @@ class Panel::Calendar::BackEnd::CalsController < OrbitBackendController
render :layout => false render :layout => false
end end
def get_events
month = params[:month]
year = params[:year]
events = Event.where(:start_month => month).and(:start_year => year)
@events = Array.new
events.each do |event|
# @temp = Array.new
no_of_days = Date.new(event.end_year,event.end_month,event.end_date) - Date.new(event.start_year,event.start_month,event.start_date)
no_of_days = no_of_days.to_i
no_of_days += 1
color = Cal.find(event.cal_id).color
@events << {"start_date"=>event.start_date, "total_days" => no_of_days, "title" => event.title,"color"=>color}
end end
render :json => @events.to_json
end
end

View File

@ -2,6 +2,57 @@ class Panel::Calendar::BackEnd::EventsController < OrbitBackendController
def new def new
@calendars = Cal.all @calendars = Cal.all
@event = Event.new
if params[:ref] == "add-btn"
@all_day_disabled = true
else
@all_day_disabled = false
end
@placeholder = params[:date]+"/"+params[:month]+"/"+params[:year]
render :layout => false render :layout => false
end end
def create
title = params[:event][:title]
note = params[:event][:note]
$start = params[:start_date]
$end = params[:end_date]
$starttime = params[:start_time]
$endtime = params[:end_time]
temp = $start.split("/")
start_date = temp[0]
start_month = temp[1]
star_year = temp[2]
temp = $end.split("/")
end_date = temp[0]
end_month = temp[1]
end_year = temp[2]
start_am_pm = params[:start_am_pm]
end_am_pm = params[:end_am_pm]
cal_id = params[:event][:cal_id]
@event = Event.new
@event.title = title
@event.note = note
@event.start_year = star_year
@event.end_year = end_year
@event.start_month = start_month
@event.end_month = end_month
@event.start_date = start_date
@event.end_date = end_date
@event.start_time = $starttime
@event.start_am_pm = start_am_pm
@event.end_time = $endtime
@event.end_am_pm = end_am_pm
@event.cal_id = cal_id
@event.save!
respond_to do |h|
h.js
end
end
end end

View File

@ -3,13 +3,17 @@ class Event
include Mongoid::Timestamps include Mongoid::Timestamps
field :title field :title
field :description field :note
field :start_year field :start_year, type: Integer
field :end_year field :end_year, type: Integer
field :start_month field :start_month, type: Integer
field :end_month field :end_month, type: Integer
field :start_date field :start_date, type: Integer
field :end_date field :end_date, type: Integer
field :start_time, type: Float
field :start_am_pm
field :end_time, type: Float
field :end_am_pm
belongs_to :cal belongs_to :cal

View File

@ -58,7 +58,7 @@
<div class="span8"> <div class="span8">
</div> </div>
<div class="span4"> <div class="span4">
<%= link_to "Add", new_panel_calendar_back_end_event_path, :class => "btn btn-primary pull-right", :id=>"create_event_btn" %> <%= link_to "Add", new_panel_calendar_back_end_event_path, :class => "btn btn-primary pull-right", :id=>"create_event_btn", :ref=>"add-btn" %>
</div> </div>
</div> </div>
</div> </div>

View File

@ -36,7 +36,7 @@
<% end %> <% end %>
</tr> </tr>
</table> </table>
<table class="table month_date"> <table class="table month_date" row="<%= i+1 %>">
<tr> <tr>
<% x = 0 %> <% x = 0 %>
<% while x < 7 %> <% while x < 7 %>
@ -45,7 +45,7 @@
<% elsif day_count_for_title >= @post_disabled_days %> <% elsif day_count_for_title >= @post_disabled_days %>
<td class="day_title disable"><%= @dateset[day_count_for_title] %></td> <td class="day_title disable"><%= @dateset[day_count_for_title] %></td>
<% else %> <% else %>
<td class="day_title"><%= @dateset[day_count_for_title] %></td> <td class="day_title click_event" ref="day-btn" link="<%= new_panel_calendar_back_end_event_path %>" date="<%= @dateset[day_count_for_title] %>" position="<%= x+1 %>"><%= @dateset[day_count_for_title] %></td>
<% end %> <% end %>
<% day_count_for_title += 1 %> <% day_count_for_title += 1 %>
<% x += 1 %> <% x += 1 %>
@ -55,37 +55,4 @@
</div> </div>
<% i += 1 %> <% i += 1 %>
<% end %> <% end %>
<!-- <div class="month_row">
<table class="table month_table">
<tr>
<td></td>
<td></td>
<td class="today"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="table month_date">
<tr>
<td class="day_title">9</td>
<td class="day_title">10</td>
<td class="day_title">11</td>
<td class="day_title">12</td>
<td class="day_title">13</td>
<td class="day_title">14</td>
<td class="day_title">15</td>
</tr>
<tr>
<td colspan="7"><div class="event" style="background-color: #ffcc00;">7pm - 9pm test event</div></td>
</tr>
<tr>
<td colspan="2"></td>
<td><div class="event single" style="background-color: #ffcc00;">7pm - 9pm test event</div></td>
</tr>
</table>
</div>
-->
</div> </div>

View File

@ -0,0 +1,2 @@
$("#event_create").empty().hide();
$("#create_event_btn").removeClass("active");

View File

@ -1,19 +1,19 @@
<div class="modal-body"> <div class="modal-body">
<div class="event_controller"> <div class="event_controller">
<form class="form-horizontal"> <!-- <form class="form-horizontal"> -->
<%= form_for @event, :url =>{:action => :create}, :class=>"form-horizontal", :remote => true do |f| %>
<div class="row-fluid"> <div class="row-fluid">
<button type="button" class="close btn-close" data-dismiss="modal" aria-hidden="true">×</button> <button type="button" class="close btn-close" data-dismiss="modal" aria-hidden="true">×</button>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<input class="span12" type="text" placeholder="Event name"> <%= f.text_field :title, :class=>"span12", :placeholder => "Event Name" %>
</div>
<div class="row-fluid">
<input class="span12" type="text" placeholder="Location">
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<% if !@all_day_disabled %>
<label class="checkbox inline"> <label class="checkbox inline">
<input type="checkbox" for="all_day"> All day <input type="checkbox" for="all_day"> All day
</label> </label>
<% end %>
<label class="checkbox inline"> <label class="checkbox inline">
<input type="checkbox"> Repeat <input type="checkbox"> Repeat
</label> </label>
@ -22,72 +22,72 @@
<div class="row-fluid"> <div class="row-fluid">
<label class="control-label span3">From</label> <label class="control-label span3">From</label>
<div class="row-fluid span9"> <div class="row-fluid span9">
<input class="span5" type="text" placeholder="09/12/2012"> <input class="span5" type="text" value="<%= @placeholder %>" name="start_date" placeholder="<%= @placeholder %>">
<select name="" id="" class="span4"> <select name="start_time" class="span4">
<option value="">1:00</option> <option value="1.00">1:00</option>
<option value="">1:30</option> <option value="1.30">1:30</option>
<option value="">2:00</option> <option value="2.00">2:00</option>
<option value="">2:30</option> <option value="2.30">2:30</option>
<option value="">3:00</option> <option value="3.00">3:00</option>
<option value="">3:30</option> <option value="3.30">3:30</option>
<option value="">4:00</option> <option value="4.00">4:00</option>
<option value="">4:30</option> <option value="4.30">4:30</option>
<option value="">5:00</option> <option value="5.00">5:00</option>
<option value="">5:30</option> <option value="5.30">5:30</option>
<option value="">6:00</option> <option value="6.00">6:00</option>
<option value="">6:30</option> <option value="6.30">6:30</option>
<option value="">7:00</option> <option value="7.00">7:00</option>
<option value="">7:30</option> <option value="7.30">7:30</option>
<option value="">8:00</option> <option value="8.00">8:00</option>
<option value="">8:30</option> <option value="8.30">8:30</option>
<option value="">9:00</option> <option value="9.00">9:00</option>
<option value="">9:30</option> <option value="9.30">9:30</option>
<option value="">10:00</option> <option value="10.00">10:00</option>
<option value="">10:30</option> <option value="10.30">10:30</option>
<option value="">11:00</option> <option value="11.00">11:00</option>
<option value="">11:30</option> <option value="11.30">11:30</option>
<option value="">12:00</option> <option value="12.00">12:00</option>
<option value="">12:30</option> <option value="12.30">12:30</option>
</select> </select>
<select name="" id="" class="span3"> <select name="start_am_pm" class="span3">
<option value="">AM</option> <option value="AM">AM</option>
<option value="">PM</option> <option value="PM">PM</option>
</select> </select>
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<label class="control-label span3">To</label> <label class="control-label span3">To</label>
<div class="row-fluid span9"> <div class="row-fluid span9">
<input class="span5" type="text" placeholder="09/12/2012"> <input class="span5" type="text" name="end_date" value="<%= @placeholder %>" placeholder="<%= @placeholder %>">
<select name="" id="" class="span4"> <select name="end_time" class="span4">
<option value="">1:00</option> <option value="1.00">1:00</option>
<option value="">1:30</option> <option value="1.30">1:30</option>
<option value="">2:00</option> <option value="2.00">2:00</option>
<option value="">2:30</option> <option value="2.30">2:30</option>
<option value="">3:00</option> <option value="3.00">3:00</option>
<option value="">3:30</option> <option value="3.30">3:30</option>
<option value="">4:00</option> <option value="4.00">4:00</option>
<option value="">4:30</option> <option value="4.30">4:30</option>
<option value="">5:00</option> <option value="5.00">5:00</option>
<option value="">5:30</option> <option value="5.30">5:30</option>
<option value="">6:00</option> <option value="6.00">6:00</option>
<option value="">6:30</option> <option value="6.30">6:30</option>
<option value="">7:00</option> <option value="7.00">7:00</option>
<option value="">7:30</option> <option value="7.30">7:30</option>
<option value="">8:00</option> <option value="8.00">8:00</option>
<option value="">8:30</option> <option value="8.30">8:30</option>
<option value="">9:00</option> <option value="9.00">9:00</option>
<option value="">9:30</option> <option value="9.30">9:30</option>
<option value="">10:00</option> <option value="10.00">10:00</option>
<option value="">10:30</option> <option value="10.30">10:30</option>
<option value="">11:00</option> <option value="11.00">11:00</option>
<option value="">11:30</option> <option value="11.30">11:30</option>
<option value="">12:00</option> <option value="12.00">12:00</option>
<option value="">12:30</option> <option value="12.30">12:30</option>
</select> </select>
<select name="" id="" class="span3"> <select name="end_am_pm" class="span3">
<option value="">AM</option> <option value="AM">AM</option>
<option value="">PM</option> <option value="PM">PM</option>
</select> </select>
</div> </div>
</div> </div>
@ -95,27 +95,22 @@
<div class="row-fluid"> <div class="row-fluid">
<label for="" class="control-label span3">Calendars</label> <label for="" class="control-label span3">Calendars</label>
<div class="row-fluid span9"> <div class="row-fluid span9">
<!-- <select name="" id="" class="span12"> <%= f.select(:cal_id, Cal.all.collect {|p| [ p.name, p.id ] },{:prompt => t("calendar.select_calendar")},:class => "validate") %>
<option value="">calendar 1</option>
<option value="">calendar 2</option>
<option value="">calendar 3</option>
</select> -->
<%= select("Calendar", Cal.all.collect {|p| [ p.name, p.id ] },{:prompt => t("calendar.select_calendar")},:class => "validate") %>
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<label for="" class="control-label span3">Note</label> <label for="" class="control-label span3">Note</label>
<div class="row-fluid span9"> <div class="row-fluid span9">
<textarea name="" id="" cols="30" rows="3" class="span12"></textarea> <%= f.text_area :note, :class=>"span12", :cols=>"30", :rows=>"3" %>
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<div class="span9 offset3"> <div class="span9 offset3">
<button class="btn">Delete</button>
<button class="btn btn-close">Cancel</button> <button class="btn btn-close">Cancel</button>
<button class="btn">Create</button> <%= f.submit t("calendar.create"), :class=>"btn" %>
</div> </div>
</div> </div>
</form> <% end %>
<!-- </form> -->
</div> </div>
</div> </div>

View File

@ -6,3 +6,4 @@ en:
save: Save save: Save
delete: Delete delete: Delete
select_calendar: "Select Calendar" select_calendar: "Select Calendar"
create: Create

View File

@ -7,6 +7,7 @@ Rails.application.routes.draw do
match 'cals/month_view' => 'cals#month_view', :via => :get match 'cals/month_view' => 'cals#month_view', :via => :get
match 'cals/day_view' => 'cals#day_view', :via => :get match 'cals/day_view' => 'cals#day_view', :via => :get
match 'cals/week_view' => 'cals#week_view', :via => :get match 'cals/week_view' => 'cals#week_view', :via => :get
match 'cals/getEvents' => 'cals#get_events', :via => :get
resources :cals resources :cals
resources :events resources :events