【问题标题】:display 3 months calendar with previous and next arrows at the top using calendar library codeigniter : Issue with Previous Button使用日历库 codeigniter 在顶部显示 3 个月的日历,并在顶部显示上一个和下一个箭头:上一个按钮的问题
【发布时间】:2019-07-29 10:02:46
【问题描述】:

我正在使用 Codegniter 日历库在一个镜头(页面)中显示三个月的日历,页面顶部有上一个和下一个按钮。

我的问题:使用“下一个”按钮可以正常工作,但使用“上一个”按钮,我无法“减少年份”。

即,最初,在第一页上,它显示 [2019 年 3 月至 2019 年 5 月] 的日历,单击“下一步”按钮,它显示 [2019 年 6 月至 2019 年 8 月] 的日历:工作正常。

但是当您点击“上一个”按钮时,它会显示月份的日历 [2019 年 2 月,2019 年 1 月,2019 年 3 月]。应该是 2018 年 12 月,而不是 2019 年 3 月。

这是我的代码:

应用程序/控制器/Calendar_controller1.php

public function display($year=null,$month=null){


    if(!$year){

        $year = date('Y');

    }

    if(!$month){

        $month = date('m');
    }

    $this->load->model("cal_model1");
    $data["cur_month_calendar"] = $this->cal_model1->generate($year,$month);
    $data["cur_month1_calendar"] = $this->cal_model1->generate($year,$month+1);
    $data["cur_month2_calendar"] = $this->cal_model1->generate($year,$month+2);

    $data["year"] = $year;
    $data["nxt_month"] = $month+2;
    $data["prev_month"] = $month;


    $this->load->view("cal_view1",$data);
}


 public function build_next_display(){


    $varCurMonth = $this->input->post('month');
    $varCurYear = $this->input->post('year');
    $this->load->model("cal_model1");
     $data["nxt_month1"] = $this->cal_model1->generate($varCurYear,$varCurMonth+1);
    $data["nxt_month2"] = $this->cal_model1->generate($varCurYear,$varCurMonth+2);
    $data["nxt_month3"] = $this->cal_model1->generate($varCurYear,$varCurMonth+3);

    $data["year"] = $varCurYear;
    $data["month"] = $varCurMonth+3;

    //$this->load->view("cal_view1",$data); 

    echo json_encode($data);
} 


     public function build_prev_display(){


    $varCurMonth = $this->input->post('month');
    $varCurYear = $this->input->post('year');
    $this->load->model("cal_model1");
     $data["nxt_month1"] = $this->cal_model1->generate($varCurYear,$varCurMonth-1);
    $data["nxt_month2"] = $this->cal_model1->generate($varCurYear,$varCurMonth-2);
    $data["nxt_month3"] = $this->cal_model1->generate($varCurYear,$varCurMonth-3);

    $data["year"] = $varCurYear;
    $data["month"] = $varCurMonth-1;

    //$this->load->view("cal_view1",$data); 

    echo json_encode($data);
} 

应用程序/模型/Cal_model1.php

public  $conf = array();

public function __construct(){



    $this->conf = array(
                'start_day' => 'monday',
                //'show_next_prev' => true,
                //'next_prev_url' => base_url().'Calendar_Controller/display',
                'day_type' => 'short'
    );

    $this->conf['template'] = '

    {table_open}<table border="0" cellpadding="0" cellspacing="0" class="calendar">{/table_open}

    {heading_row_start}<tr class="heading">{/heading_row_start}

    {heading_previous_cell}<th><a href="{previous_url}">&lt;&lt;</a></th>{/heading_previous_cell}
    {heading_title_cell}<th colspan="{colspan}">{heading}</th>{/heading_title_cell}
    {heading_next_cell}<th><a href="{next_url}">&gt;&gt;</a></th>{/heading_next_cell}

    {heading_row_end}</tr>{/heading_row_end}

    {week_row_start}<tr class="weekdays">{/week_row_start}
    {week_day_cell}<td>{week_day}</td>{/week_day_cell}
    {week_row_end}</tr>{/week_row_end}

    {cal_row_start}<tr class="days">{/cal_row_start}
    {cal_cell_start}<td class="day">{/cal_cell_start}
    {cal_cell_start_today}<td>{/cal_cell_start_today}
    {cal_cell_start_other}<td class="other-month">{/cal_cell_start_other}

    {cal_cell_content}
        <div class="day_num">{day}</div>
        <div class="content">{content}</div>
    {/cal_cell_content}
    {cal_cell_content_today}
        <div class="day_num highlight">{day}</div>
        <div class="content">{content}</div>
    {/cal_cell_content_today}

    {cal_cell_no_content}
        <div class="day_num">{day}</div>
    {/cal_cell_no_content}
    {cal_cell_no_content_today}
        <div class="day_num highlight">{day}</div>
    {/cal_cell_no_content_today}

    {cal_cell_blank}&nbsp;{/cal_cell_blank}

    {cal_cell_other}
        <div class="day_num">{day}</div>
    {/cal_cel_other}

    {cal_cell_end}</td>{/cal_cell_end}
    {cal_cell_end_today}</td>{/cal_cell_end_today}
    {cal_cell_end_other}</td>{/cal_cell_end_other}
    {cal_row_end}</tr>{/cal_row_end}




    {table_close}</table>{/table_close}
    ';



}


public function startsWith($string, $startString){

    $len = strlen($startString); 
    return (substr($string, 0, $len) === $startString); 

}


public function get_calendar_data($year,$month){

    $varMonthLen = strlen($month);
    if($varMonthLen == 1){
        $month = '0'.$month;
    }
    $this->db->select('holiday_date,holiday_name');
    $this->db->from('holiday_list');
    $this->db->where('country_id',1);
    $this->db->like('holiday_date',"$year-$month",'after');
    $query=$this->db->get();
    //print_r($this->db->last_query());exit;
    //print_r($query->result());


    $cal_data = array();
    foreach($query->result() as $row){
        $holiday_date = substr($row->holiday_date,8,2);

        $startsWithZero = $this->startsWith($holiday_date,"0");

        if($startsWithZero == true){
            $holiday_date = str_replace('0','',$holiday_date);
        }
        $cal_data[$holiday_date] = $row->holiday_name;  
    }



    return $cal_data; //Issue : 01 -09 Dates  , If you change , this to 1 -9 , it works


}


public function generate($year,$month){

    $this->load->library("calendar",$this->conf);
    $cal_data = $this->get_calendar_data($year,$month);
    //print_r($cal_data);
    return $this->calendar->generate($year,$month,$cal_data);
}

应用程序/views/cal_view1.php

<script src="<?php echo base_url();?>assets/js/jquery.min.js"></script>
<script type="text/javascript">

var year = "<?php echo $year; ?>";
var nxtMonth = "<?php echo $nxt_month; ?>";
var prevMonth = "<?php echo $prev_month; ?>";


$('.previous').click(function(){

//alert("previous");
//alert("year"+year);
//alert("month"+prevMonth);

$.ajax({
   url: "<?php echo base_url();?>Calendar_controller1/build_prev_display",
   type: "POST",
   data: {'month':prevMonth,'year':year},

   dataType: "json",
   success: function (res) {
   
	console.log(res.nxt_month1);
	$('#cur_month_calendar').html('');
	$('#cur_month_calendar').html(res.nxt_month1);
	
	$('#cur_month1_calendar').html('');
	$('#cur_month1_calendar').html(res.nxt_month2);
	
	$('#cur_month2_calendar').html('');
	$('#cur_month2_calendar').html(res.nxt_month3);
	
	year = res.year;
	prevMonth = res.month;
	
  },                   
});


});

$('.next').click(function(){

//alert("next");
//alert("year"+year);
//alert("month"+nxtMonth);



$.ajax({
   url: "<?php echo base_url();?>Calendar_controller1/build_next_display",
   type: "POST",
   data: {'month':nxtMonth,'year':year},

   dataType: "json",
   success: function (res) {
   
	console.log(res.nxt_month1);
	$('#cur_month_calendar').html('');
	$('#cur_month_calendar').html(res.nxt_month1);
	
	$('#cur_month1_calendar').html('');
	$('#cur_month1_calendar').html(res.nxt_month2);
	
	$('#cur_month2_calendar').html('');
	$('#cur_month2_calendar').html(res.nxt_month3);
	
	year = res.year;
	nxtMonth = res.month;
	
  },                   
}); 

});

</script>
.calendar{
	font-family:Arial;
	font-size:12px;
}
table.calendar{
	
	margin:auto;
	border-collapse:collapse;
}
.calendar .days td{
	width:50px;
	height:50px;
	border:2px solid black;
	padding:4px;
	vertical-align:top;
	background-color:#DEF;
	
}

.calendar .days td:hover{

	background-color:#FFF;
	
}

.calendar .weekdays td{
	
	border:2px solid black;
	padding:2px;
	text-align:center;
	background-color : #C0C0C0;
}

.calendar .heading th{
	
	text-transform:uppercase;
    font-size:16px;	
	padding:10px;
	
}

.calendar .highlight{
	
	font-weight:bold;
	color:blue;	
}

.calendar .content{
    
    width: 50px;
    background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	border: 2px solid green;
    text-align: center;
}

a {
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
}

a:hover {
  background-color: #ddd;
  color: black;
}

.previous {
  background-color: #f1f1f1;
  color: black;
 
}

.next {
  background-color: #4CAF50;
  color: white;
}
<a href="#" class="previous">&laquo; </a>
<a href="#" class="next"> &raquo;</a>

<?php //echo $calendar; ?>



<div id="cur_month_calendar">
	<?php echo $cur_month_calendar; ?>
</div>

<div id="cur_month1_calendar">
	<?php echo $cur_month1_calendar; ?>
</div>

<div id="cur_month2_calendar">
	<?php echo $cur_month2_calendar; ?>
</div>

【问题讨论】:

  • 基本上,您需要将月份和年份的单独值转换为日期,然后使用日期函数加或减 3 个月,然后再转换回您的月份和年份值。
  • 我无法理解你的概念......你能帮我举几个例子吗?

标签: javascript php html mysql codeigniter


【解决方案1】:

下面的代码应该可以满足您的需求,但可以简化。我这样写是为了让你可以看到日期在 PHP 中是如何工作的。作为参考,请查看DateIntervaldate_adddate_sub

public function build_next_display(){

    $varCurMonth = $this->input->post('month');
    $varCurYear = $this->input->post('year');

    $startTimeStamp = strtotime($varCurYear.'/'.$varCurMonth.'/01');
    $interval1 = new DateInterval('P0M');
    $interval2 = new DateInterval('P1M');
    $interval3 = new DateInterval('P2M');

    $Month1 = date_add( $startTimeStamp, $interval1 );
    $Month2 = date_add( $startTimeStamp, $interval2 );
    $Month3 = date_add( $startTimeStamp, $interval3 );

    $this->load->model("cal_model1");
    $data["nxt_month1"] = $this->cal_model1->generate(year($Month1),month($Month1));
    $data["nxt_month2"] = $this->cal_model1->generate(year($Month2),month($Month2));
    $data["nxt_month3"] = $this->cal_model1->generate(year($Month3),month($Month3));
    $data["year"] = year($Month1);
    $data["month"] = month($Month3);

    //$this->load->view("cal_view1",$data); 

    echo json_encode($data);
} 


public function build_prev_display(){


    $varCurMonth = $this->input->post('month');
    $varCurYear = $this->input->post('year');

    $interval1 = new DateInterval('P0M');
    $interval2 = new DateInterval('P1M');
    $interval3 = new DateInterval('P2M');

    $Month1 = date_sub( $startTimeStamp, $interval1 );
    $Month2 = date_sub( $startTimeStamp, $interval2 );
    $Month3 = date_sub( $startTimeStamp, $interval3 );

    $this->load->model("cal_model1");
    $data["nxt_month1"] = $this->cal_model1->generate(year($Month1),month($Month1));
    $data["nxt_month2"] = $this->cal_model1->generate(year($Month2),month($Month2));
    $data["nxt_month3"] = $this->cal_model1->generate(year($Month3),month($Month3));
    $data["year"] = year($Month1);
    $data["month"] = month($Month3);

    echo json_encode($data);
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-07-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-05-14
    • 1970-01-01
    相关资源
    最近更新 更多