php 는 fullcalendar 달력 플러그 인 을 사용 합 니 다.

7722 단어 phpfullcalendar일력
최근 에 교과 과정 표를 만 드 는 프로젝트 는 많은 플러그 인 을 찾 았 는데 사용 하기 가 좋 지 않 았 습 니 다.본의 아니 게 fullcalendar 를 보 았 습 니 다.아주 간단 하고 편리 합 니 다.먼저 프로젝트 페이지 를 붙 입 니 다.

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<!--      -->
<link href='/public/school/table/fullcalendar.min.css' rel='stylesheet' />
<link href='/public/school/table/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='/public/school/table/moment.min.js'></script>
<script src='/public/school/table/jquery.min.js'></script>
<script src='/public/school/table/fullcalendar.min.js'></script>
<!-- fullcalendar    -->
<script src='/public/school/table/locale-all.js'></script>

<!-- layui -->
<link rel="stylesheet" href="/public/school/layui/css/layui.css" rel="external nofollow" media="all">
<link rel="stylesheet" href="/public/school/style/admin.css" rel="external nofollow" media="all">
<script src="/public/school/layui/layui.js"></script> 

<!-- bootstrap -->
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' rel='stylesheet' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js'></script>
</head>
<script>

 //      
 var myDate = new Date();
 var defaultDate = myDate.getFullYear() +'-'+(myDate.getMonth()+1)+'-'+myDate.getDate()

 $(document).ready(function() {
 $('#calendar').fullCalendar({
 header: { //      
 left: 'prev,next today',
 center: 'title',
 right: 'month,agendaWeek,agendaDay,listMonth'
 },
 defaultDate: defaultDate, //      
 navLinks: true, // can click day/week names to navigate views
 defaultView:'agendaWeek', //              
 allDaySlot: false, //    all-day
 slotLabelFormat:'H:mm', //        
 minTime : '06:00:00', //         
 maxTime : '22:00:00', //         
 locale: 'zh-cn', //    
 selectable: true, //              
 eventLimit: true, //                  ，             ，      +...more ，              

 //         ，   
 eventClick: function(calEvent, jsEvent, view) {
 console.log('cycle_id:' + calEvent.id); //       id
 console.log('sel_type:' + calEvent.sel_type); //          1   2  
 //       
 layer.open({
  type: 2,
  title: '     ',
  shadeClose: true,
  shade: [0.5, '#000'],
  maxmin: true, //          
  area: ['900px', '650px'],
  content: "/school/Course_Table/cycleInfo.html?cycle_id="+calEvent.id,
  end: function () {
  //      
  location.reload();
  }
  });
 },

 //       ，           ，   
 select: function(startDate, endDate) {
  selDate = startDate.format('YYYY-MM-DD'); //       
  layer.open({
  type: 2,
  title: '    ',
  shadeClose: true,
  shade: [0.5, '#000'],
  maxmin: true, //          
  area: ['900px', '650px'],
  content: "/school/Course_Table/addCycle2.html?selDate="+selDate,
  end: function () {
  //      
  location.reload();
  }
  });
 },
 
 //       
 views: {
  month: { 
  titleFormat: 'YYYY MM '
 },
 agenda: {
  titleFormat: 'YYYY MM DD '
 },
 week: {
  titleFormat: 'YYYY MM DD '
 },
 },

 //           bootstorp   
 eventRender: function(eventObj, $el) {
 $el.popover({
  content: eventObj.description,
  trigger: 'hover',
  placement: 'top',
  container: 'body'
 });
 },

 //              json  
 events: function(start,end,timezone, callback) {
 $.ajax({
  url: "{:url('courseTable')}",
  dataType: 'json',
  type:"POST",
  success: function(data) { 
  if (data.status == 0) {
  callback(data.msg);
  }else{
  layer.msg('    ');
  }
  },
  error:function () {
  layer.msg('    ');
  }
 });
 }
 });


 });

</script>
<style>

 body {
 /*margin: 40px 10px;*/
 padding: 0;
 font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
 font-size: 14px;
 }

 #calendar {
 max-width: 1200px;
 margin: 0 auto;

 }

</style>
</head>
<body>
<div class="layui-fluid" style="margin: 10px">
 <div class="layui-card">
 <div class="layui-card-body">
 <div id='calendar'></div>
 </div>
 </div>
</div>
<script type="text/javascript">
 //  layui
 layui.use(['layer','element','form'], function(){
 var layer = layui.layer
 ,element = layui.element
 ,form = layui.form;
 });
</script>
</body>
</html>
php 백 엔 드 코드:여기 표시 할 형식 을 백 엔 드 에 봉 하여 프론트 데스크 에 가서 직접 꺼 내 서 사용 하면 됩 니 다.
메모:title 과 start 즉 제목 과 시작 시간 은 필수 입 니 다.다른 매개 변 수 는 선택 할 수 있 습 니 다.그 중에서 start 형식 은'날짜 T 시간'이 고 중간 에'T'라 는 글자 가 있 습 니 다.자신의 상황 을 볼 때 description 의 내용 은 마우스 로 올 려 서 표시 할 내용 입 니 다.

public function courseTable()
 {
 if (request()->isPost()) {
　　　　　　　//    
  $list = model('CourseTable')->getCourseTable($this->sid);
  foreach ($list as $key => $value) {
  $val['id'] = $value['id']; ///     
  $val['sel_type'] = $value['sel_type']; ///       1   2  
  $val['title'] = '  :'.$value['teacher_name']. '  :'.$value['grade_name'];
  $val['start'] = $value['date'].'T'.$value['start_time'];
  $val['end'] = $value['date'].'T'.$value['end_time'];
  $val['description'] = '  :'.$value['teacher_name'].'  :'.$value['grade_name'].'  :'.$value['room_name'];
  $val['color'] = '#009688';
  $val['textColor'] = '#fff';

  $newList[] = $val;
  }
  
  return return_succ($newList);
 }
 return $this->fetch();
 }

코드 에 주석 이 있 고 모 르 는 것 이 있 으 면 메 시 지 를 남 겨 소통 할 수 있 습 니 다.
공식 사이트 에 문서 가 있 으 니 천천히 연구 할 수 있 습 니 다.
위 에서 말 한 것 은 소 편 이 소개 한 phop 에서 fullcalendar 달력 플러그 인 을 사용 하 는 튜 토리 얼 을 상세 하 게 통합 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
MySQL 입문 강좌(5)표 생 성,수정,삭제
windows 에서 MySQL 5.7.3.0 설정 도해 튜 토리 얼 설치(설치 판)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage