简体   繁体   English

Fullcalendar过滤事件与select

[英]Fullcalendar filtrering events with select

I want to filter events by changing a select option, but I'm not sure how. 我想通过更改选择选项来过滤事件,但我不确定如何。 Some help please(I want to clarify that this is the first time I use Json and FullCalendar) 请帮忙(我想澄清这是我第一次使用Json和FullCalendar)

Example: 例:

在此输入图像描述

Controller cCalendar 控制器cCalendar

 public function geteventos(){

    $rut_usu = $this->input->post('rut_usu');
    $r = $this->mCalendar->geteventos($rut_usu);
    echo json_encode($r);



}

Model mCalendar 模型mCalendar

 public function geteventos($rut_usu){


 $this->db->select('CONCAT(estudiantes.pnombre," ", estudiantes.apellido_pa," ", estudiantes.apellido_ma,", ",motivos_citas.descripcion_mot) As title ,citas.id_ci id, citas.fecha_ini start, citas.fecha_ter end');
 $this->db->from('citas');
 $this->db->join('estudiantes', 'citas.rut_estu = estudiantes.rut_estu');
 $this->db->join('motivos_citas','citas.id_mot = motivos_citas.id_mot');
 $this->db->join('usuarios','citas.rut_usu = usuarios.rut_usu');
 $this->db->where('usuarios.rut_usu',$rut_usu);

 return $this->db->get()->result();


}

Javascript 使用Javascript

 $("#rut_usu").change(function(){

  rut_usu = $('#rut_usu').val();

  $.post('<?php echo base_url();?>cCalendar/geteventos',



 $('#calendar').fullCalendar({

  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay,listMonth'
  },

  defaultDate: new Date(),
  navLinks: true, // can click day/week names to navigate views
  businessHours: true, // display business hours
  editable: true,
  events: $.parseJSON(data) 

    });



  }));

Your controller and modal is not any changes. 您的控制器和模态不是任何更改。 Only changes in js: 只有js的变化:

Create new javascript function: 创建新的javascript函数:

function getEvents(rut_usu)
{ 
    $('#calendar').fullCalendar( 'removeEvents'); 
    $.ajax({
        type:"GET",
        url: "<?=base_url();?>cCalendar/geteventos",
        dataType: 'json',
        data: {rut_usu:rut_usu },
        success: function(data){

            $.each(data, function(index, event){
                $('#calendar').fullCalendar('renderEvent', event);
            });
        }
    });
} 

Call this function into on change dropdown event: 在更改下拉事件中调用此函数:

<select id="rut_usu" OnChange="getEvents(this.value);">
-----
</select>

Render Event when change select option. 更改选择选项时渲染事件。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM