javascript - codeigniter calendar: how to get the selected date? -
i trying modify codeigniter calendar in order give separate add button every cell. when add button clicked pop displayed particular date auto filled in pop up. want selected date when click add button.
my calendar this. 
i used following model function create calendar
function mycal_model() { $this->conf = array( 'show_next_prev' => true, 'next_prev_url' => base_url() . 'index.php/dashboard/index/' ); $this->conf['template'] = ' {table_open}<table cellpadding="1" cellspacing="2" class="calendar">{/table_open} {heading_row_start}<tr>{/heading_row_start} {heading_previous_cell}<th class="prev_sign"><a href="{previous_url}"><<</a></th>{/heading_previous_cell} {heading_title_cell}<th colspan="{colspan}">{heading}</th>{/heading_title_cell} {heading_next_cell}<th class="next_sign"><a href="{next_url}">>></a></th>{/heading_next_cell} {heading_row_end}</tr>{/heading_row_end} //deciding week row start {week_row_start}<tr class="week_name" >{/week_row_start} //deciding week day cell , week days {week_day_cell}<td >{week_day}</td>{/week_day_cell} //week row end {week_row_end}</tr>{/week_row_end} {cal_row_start}<tr class= "days">{/cal_row_start} {cal_cell_start}<td>{/cal_cell_start} {cal_cell_content} <div class="day_num">{day}<button type="button" class="add_btn">+</button> </div> <div class="content" style="width:50%; height:40px;">{content} </div> {/cal_cell_content} {cal_cell_content_today} <div class="day_num highlight">{day}<button type="button" class="add_btn">+</button> </div> <div class= "content">{content}</div> {/cal_cell_content_today} {cal_cell_no_content}<div class="day_num">{day}<button type="button" class="add_btn">+</button> </div> <div class="content1" style="width:50%; height:35px; display:block; float:left; background-color:#95ff95; text-align:center; vertical-align:middle; "><a href="#">+</a> </div> <div class="content2" style="width:50%; height:35px; display:block; float:left; background-color:#95ff95; text-align:center; vertical-align:middle; "><a href="#">+</a> </div> <div class="content3" style="width:50%; height:35px; display:block; float:left; background-color:#95ff95; text-align:center; vertical-align:middle; "><a href="#">+</a> </div> <div class="content4" style="width:50%; height:35px; display:block; float:left;; background-color:#95ff95; text-align:center; vertical-align:middle; "><a href="#">+</a> </div> {/cal_cell_no_content} {cal_cell_no_content_today}<div class="day_num highlight">{day}<button type="button" class="add_btn">+</button> </div> <div class="content1" style="width:50%; height:35px; display:block; float:left; background-color:#95ff95; text-align:center; vertical-align:middle; "><a href="#">+</a> </div> <div class="content2" style="width:50%; height:35px; display:block; float:left; background-color:#95ff95; text-align:center; vertical-align:middle; "><a href="#">+</a> </div> <div class="content3" style="width:50%; height:35px; display:block; float:left; background-color:#95ff95; text-align:center; vertical-align:middle; "><a href="#">+</a> </div> <div class="content4" style="width:50%; height:35px; display:block; float:left;; background-color:#95ff95; text-align:center; vertical-align:middle; "><a href="#">+</a> </div>{/cal_cell_no_content_today} {cal_cell_blank} {/cal_cell_blank} {cal_cell_end}</td>{/cal_cell_end} {cal_row_end}</tr>{/cal_row_end} {table_close}</table>{/table_close} '; } i have following script button click event add button. can show pop up.i have no idea how selected date.
$(".calendar .days td .add_btn").click(function() { $('#events_add_modal').modal('show'); }); if has idea great help.
i recommend video on this page. he's using jquery @ 30 mins in video build onclick event returns day clicked. it's easy expand return full date.
hope you'll find useful.
Comments
Post a Comment