Используем стандратный календарь CodeIginter совместно с Ajax

Сегодня поговорим о стандартном календаре в CodeIgniter.

Задача довольно простая. Сделать обычный календарь на сайте с названием месяца, списком дней этого месяца и с возможностью листать календарь по месяцам. Дни календаря по которым есть события должны быть в виде ссылки на события этого дня, остальные дни без ссылок. Естественно при переходе на следующий или предыдущий месяц весь сайт не должен перезагружаться, следовательно надо использовать AJAХ.
Прикрутить такой календарь можно к нашей cms которую мы делали в прошлых уроках.
Для реализации нам понадобится:

Доработаем стандартную библиотеку Calendar:
function default_template()
	{
		return  array (
						'table_open' 				=> '<table border="0" cellpadding="4" cellspacing="0">',
						'heading_row_start' 		=> '<tr>',
						'heading_previous_cell'		=> '<th><input type="hidden" id="prev_val" value="{previous_url}"><label id="prev">&lt;&lt;</label></th>',
						'heading_title_cell' 		=> '<th colspan="{colspan}">{heading}</th>',
						'heading_next_cell' 		=> '<th><input type="hidden" id="next_val" value="{next_url}"><label id="next">&gt;&gt;</label></th>',

Вместо ссылок для перелистывания месяцев сделаем просто << и >> (для того чтобы курсор менялся при наведении на них в файле стилей пропишем
#prev {cursor: pointer;}

). Также добавим два скрытых поля в которых будут содержаться значения {next_url} и {previous_url} (в виде 2010/10 — год/месяц) для перехода по месяцам.
Теперь в файле вида, где мы будем выводить календарь пропишем:
<div id="calendar">
		<?=$calendar;?>	
		<script language="javascript">
	    $(document).ready(function(){ //после загрузки документа
	   		$('#prev').click(function(){ //по клику на элементе << с id='prev' 
   				var item = $('#prev_val').val(); //получаем значение элемента с id='prev_val'
												//это год месяц к которому необходимо совершить переход
	   			$.post("<?=base_url();?>calendar/show", {'item':item}, //отправляем эти данные в контроллер calendar
																		//в функцию show
	   			function(data) {//Обрабатываем ответ   				
				   	$('#calendar').html(data.result);//в элемент div c id='calendar' возвращаем 
					   								//новый календарь на другой месяц							
	   			}, "json");
	        });   
			$('#next').click(function(){
	   			var item = $('#next_val').val();
	   			$.post("<?=base_url();?>calendar/show", {'item':item},
	   			function(data) {   				
				   	$('#calendar').html(data.result);				
	   			}, "json");
	        });       
	    });    
		</script>
		</div>

Как видно из листинга у нас выводиться сам календарь а ниже идет скрипт который будет отсылать AJAX запрос и возвращать ответ.
Контроллер календарь который обрабатывает этот Ajax запрос и возвращает ответ. Там все понятно. Получаем месяц и год на который необходимо сформировать этот календарь. Отправляем эти данные в нашу библиотеку (mycalendar.php) и возвращаем по AJAX готовый календарь.
class calendar extends Controller
 
{
	function show() {
		$CI = &get_instance();
		$item = trim($this->input->post('item'));
 
		$year = substr($item,0,strpos($item,'/'));		
		$month = substr($item,strpos($item,'/')+1);
		$CI->load->library('mycalendar');
        $calendar = $CI->mycalendar->make_calendar($month,$year); 
        $calendar = '<script language="javascript">
    $(document).ready(function(){
   		$("#prev").click(function(){
   			var item = $("#prev_val").val();  						
   			$.post("'.base_url().'calendar/show", {'."'".'item'."'".':item},
   			function(data) {   				
			   	$('."'".'#calendar'."'".').html(data.result);							
   			}, "json");
        });   
		$("#next").click(function(){
   			var item = $("#next_val").val(); 
   			$.post("'.base_url().'calendar/show", {"item":item},
   			function(data) {   				
			   	$("#calendar").html(data.result);				
   			}, "json");
        });       
    });    
	</script>'.$calendar;
 
		$array = array('result' => $calendar);
		echo json_encode($array);
	}
}

Осталось сказать про нашу библиотеку mycalendar.
class mycalendar
{
 
	function show_calendar($today=false) {
		//Вывод меню
		$CI = &get_instance(); //Доступ к CodeIgniter
        $CI->load->model('mdl_events');
        $data_menu['today'] = date("Y-m-d", mktime(0, 0, 0, date("m"), date("d"), date("Y")));
        $data_menu['tomorrow'] = date("Y-m-d", mktime(0, 0, 0, date("m"), date("d") + 1, date
            ("Y")));        
        $data_menu['today_name'] = $this->name_day($data_menu['today']);
        $data_menu['today_date'] = $CI->mdl_events->mysql_to_date(date('Y-m-d'));
        if ($today === false) {
        	$calendar = $this->make_calendar(date('m'),date('Y'));
        } else {
        	$today_arr = explode("-",$today);
        	$calendar = $this->make_calendar($today_arr[1],$today_arr[0]);
        }
 
		$data_menu['calendar'] = $calendar;
		$CI->load->view('menu.php',$data_menu);
        //        
	}
 
    function make_calendar($month, $year)
    {
        $CI = &get_instance(); //Доступ к CodeIgniter
        $days = array();
        $firstdate = $year . '-' . $month . '-01';
        $lastday_num = date('d', mktime(0, 0, 0, $month + 1, 0, $year));
        if (strlen($lastday_num) == 1) {
            $lastday = '0' . $lastday_num;
        } else {
            $lastday = $lastday_num;
        }
        $lastdate = $year . '-' . $month . '-' . $lastday;
        $filter[] = "(((`from` <= '" . $firstdate . "') AND (`to` >= " . $firstdate .
            ")) OR ((`from` <= '" . $lastdate . "') AND (`to` >= " . $lastdate . ")))";
        $CI->load->model('mdl_events');
        $rez = $CI->mdl_events->getlist(false, false, $filter);
 
        for ($i = 1; $i <= $lastday_num; $i++) {
            if ($i < 10) {
                $tekdate = $year . '-' . $month . '-0' . $i;
            } else {
                $tekdate = $year . '-' . $month . '-' . $i;
            }
            foreach ($rez as $one) {
                $from = $CI->mdl_events->date_to_mysql($one['from']);
                $to = $CI->mdl_events->date_to_mysql($one['to']);
                if (($from <= $tekdate) and ($to >= $tekdate)) {
 
                        $days[$i] = base_url() . 'events/day/' . $tekdate;                        
                }
            }
        }
        $prefs = array('show_next_prev' => true, 'next_prev_url' => '', 'start_day'    => 'monday',);
        $CI->load->library('calendar', $prefs);
        $calendar = $CI->calendar->generate($year, $month, $days);
        return $calendar;
    }
 
}
// END mycalendar Class
 
?>
Теги:
стандратный календарь
Добавлено: 14 Апреля 2018 07:01:33 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...