javascript - FullCalendar में पुनरावर्ती घटनाक्रम

jquery (4)

सरल दोहराव घटनाक्रम

यहां सूचीबद्ध लोगों के लिए एक साधारण विकल्प जोड़ने के लिए, पूर्णकेंडर अब (कुछ हद तक) साप्ताहिक पुनरावर्ती घटनाओं का समर्थन करता है। इसलिए यदि आपको केवल कुछ चाहिए: [Every Monday and Thursday from 10:00am to 02:00pm] , आप निम्न का उपयोग कर सकते हैं:

events: [{
    title:"My repeating event",
    start: '10:00', // a start time (10am in this example)
    end: '14:00', // an end time (2pm in this example)
    dow: [ 1, 4 ] // Repeat monday and thursday
}],

JSFiddle

यह पृष्ठभूमि घटनाओं में प्रलेखित है लेकिन यह नियमित घटनाओं के लिए भी काम करता है।

इसे डेटाबेस में सहेजना मुश्किल नहीं होगा।

कुछ प्रतिबंध जोड़ें

यदि आप नहीं चाहते हैं कि वे असीमित रूप से दोहराएं, तो आपको कुछ प्रारंभ और समाप्ति तिथियां जोड़नी होंगी।

तो, डीबी में:

ऊपर दिखाया गया कार्यक्रम अभिभावक रिकॉर्ड का प्रतिनिधित्व करने दें
प्रारंभ / समाप्ति तिथियों के साथ एक और टेबल है।
तालिका में शामिल उदाहरण:

eventId  timeStart  timeEnd   dow    dateStart      dateEnd
     1      10:00    12:00  [1,4]  2015/03/01   2015/04/01  // Month of March
     1      10:00    12:00  [1,4]  2015/05/01   2015/06/01  // Month of May
     1      10:00    12:00  [1,4]  2016/01/01   2017/01/01  // Year of 2017

इसे JSON के रूप में क्लाइंट को पास करें:

{ id:1, start:"10:00", end:"12:00", dow:[1,4],
  ranges[{start:"2015/03/01", end:"2015/04/01"},
         {start:"2015/05/01", end:"2015/06/01"},
         {start:"2016/01/01", end:"2017/01/01"},]
}

और क्लाइंट साइड, पूर्ण कैलेंडर के eventRender रेन्डर का उपयोग केवल समय सीमाओं में होने पर ईवेंट प्रस्तुत करने के लिए करें। इस तरह कुछ काम करना चाहिए:

eventRender: function(event){
    return (event.ranges.filter(function(range){ // test event against all the ranges

        return (event.start.isBefore(range.end) &&
                event.end.isAfter(range.start));

    }).length)>0; //if it isn't in one of the ranges, don't render it (by returning false)
},

ऐसा लगता है कि आपकी घटनाओं को इस प्रकार संरचित किया गया है:

var repeatingEvents = [{
    title:"My repeating event",
    id: 1,
    start: '10:00', 
    end: '14:00', 
    dow: [ 1, 4 ], 
    ranges: [{ //repeating events are only displayed if they are within at least one of the following ranges.
        start: moment().startOf('week'), //next two weeks
        end: moment().endOf('week').add(7,'d'),
    },{
        start: moment('2015-02-01','YYYY-MM-DD'), //all of february
        end: moment('2015-02-01','YYYY-MM-DD').endOf('month'),
    },/*...other ranges*/],
},/*...other repeating events*/];

JSFiddle

रातों रात

यदि आप रातोंरात दोहराने की घटनाओं ( जैसे यहां ) चाहते हैं , तो अंत समय के लिए 24:00 से अधिक बार जाएं। उदाहरण के लिए:

{
  start: '10:00', //starts at 10 on monday
  end:   '27:00', //24+3 is handled correctly.
  dow: [1]
}

JSFiddle

मैं jQuery पूर्ण कैलेंडर का उपयोग कर रहा हूं क्योंकि मेरा कैलेंडर उपलब्धता वेबसाइट के लिए मेरी वेबसाइट में उपयोग किया जाता है।

क्या पूर्णकेंडर में कोई फ़ंक्शन / विधियां / विकल्प हैं जो मेरे पुनरावर्ती ईवेंट को दिन से संभालता है? उदाहरण के लिए, सोमवार केवल समय 7:00 पूर्वाह्न से 9:00 बजे तक, tuesdays - 4:00 अपराह्न से शाम 9:00 बजे, ऐसा कुछ?

अब एक प्लगइन है जो आप चाहते हैं जो करेंगे: http://momentjs.com/docs/#/plugins/recur/

फिलहाल मैं प्रोजेक्ट कर रहा हूं जहां मेरे पास फुल कैलेंडर है और मुझे आवर्ती कार्यक्रम करना है। तो यही कारण है कि यह कैसे किया जा सकता है। उम्मीद है कि यह कोड किसी की मदद करेगा :)

मेरे पास डेटाबेस में अगली तालिका है:

CREATE TABLE IF NOT EXISTS `app_ext_calendar_events` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `users_id` int(11) NOT NULL,
  `name` varchar(255) NOT NULL,
  `description` text,
  `start_date` int(11) NOT NULL,
  `end_date` int(11) NOT NULL,
  `event_type` varchar(16) NOT NULL,
  `is_public` tinyint(1) DEFAULT NULL,
  `bg_color` varchar(16) DEFAULT NULL,
  `repeat_type` varchar(16) DEFAULT NULL,
  `repeat_interval` int(11) DEFAULT NULL,
  `repeat_days` varchar(16) DEFAULT NULL,
  `repeat_end` int(11) DEFAULT NULL,
  `repeat_limit` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `idx_users_id` (`users_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=18 ;

और मैंने दोहराए गए कार्यक्रमों के साथ कार्यक्रम प्राप्त करने के लिए अगली पीएचपी कक्षा विकसित की:

<?php

class calendar
{
  static public function get_events($date_from, $date_to,$calendar_type)
  {
    global $app_user;

    $list = array();

    $events_query = db_query("select * from app_ext_calendar_events where FROM_UNIXTIME(start_date,'%Y-%m-%d')>='" . $date_from . "' and  FROM_UNIXTIME(end_date,'%Y-%m-%d')<='" . $date_to . "' and event_type='" . $calendar_type . "' and users_id='" . db_input($app_user['id']) . "'");
    while($events = db_fetch_array($events_query))
    {
      $list[] = $events; 
    }

    if(count($repeat_events_list = calendar::get_repeat_events($date_to,$calendar_type)))
    {
      $list = array_merge($list,$repeat_events_list);
    }

    return $list;
  }

  public static function weeks_dif($start, $end)
  {
    $year_start = date('Y',$start);
    $year_end = date('Y',$end);

    $week_start = date('W',$start); 
    $week_end = date('W',$end);

    $dif_years = $year_end - $year_start;
    $dif_weeks = $week_end - $week_start;

    if($dif_years==0 and $dif_weeks==0)
    {
      return 0;
    }
    elseif($dif_years==0 and $dif_weeks>0)
    {
      return $dif_weeks;
    }
    elseif($dif_years==1)
    {
      return (42-$week_start)+$week_end;
    }
    elseif($dif_years>1)
    {
      return (42-$week_start)+$week_end+(($dif_years-2)*42);
    }


  }

  public static function months_dif($start, $end)
  {
    // Assume YYYY-mm-dd - as is common MYSQL format
    $splitStart = explode('-', date('Y-n',$start));
    $splitEnd = explode('-', date('Y-n',$end));

    if (is_array($splitStart) && is_array($splitEnd)) 
    {
        $startYear = $splitStart[0];
        $startMonth = $splitStart[1];
        $endYear = $splitEnd[0];
        $endMonth = $splitEnd[1];

        $difYears = $endYear - $startYear;
        $difMonth = $endMonth - $startMonth;

        if (0 == $difYears && 0 == $difMonth) 
        { // month and year are same
            return 0;
        }
        else if (0 == $difYears && $difMonth > 0) 
        { // same year, dif months
            return $difMonth;
        }
        else if (1 == $difYears) 
        {
            $startToEnd = 13 - $startMonth; // months remaining in start year(13 to include final month
            return ($startToEnd + $endMonth); // above + end month date
        }
        else if ($difYears > 1) 
        {
            $startToEnd = 13 - $startMonth; // months remaining in start year 
            $yearsRemaing = $difYears - 2;  // minus the years of the start and the end year
            $remainingMonths = 12 * $yearsRemaing; // tally up remaining months
            $totalMonths = $startToEnd + $remainingMonths + $endMonth; // Monthsleft + full years in between + months of last year
            return $totalMonths;
        }
    }
    else 
    {
      return false;
    }
  }

  public static function get_repeat_events($date_to,$calendar_type)
  {
    global $app_user;

    //convert date to timestamp
    $date_to_timestamp = get_date_timestamp($date_to);

    $list = array();

    //get all events that already started (start_date<=date_to)      
    $events_query = db_query("select * from app_ext_calendar_events where length(repeat_type)>0 and FROM_UNIXTIME(start_date,'%Y-%m-%d')<='" . $date_to . "' and  event_type='" . $calendar_type . "' and users_id='" . db_input($app_user['id']) . "'");
    while($events = db_fetch_array($events_query))
    {
      $start_date = $events['start_date'];

      //set repeat end      
      $repeat_end = false;
      if($events['repeat_end']>0)
      {
        $repeat_end = $events['repeat_end'];
      } 

      //get repeat events by type                       
      switch($events['repeat_type'])
      {
        case 'daily': 
            //check repeat events day bay day       
            for($date = $start_date; $date<=$date_to_timestamp; $date+=86400)            
            {
              if($date>$start_date)
              {
                $dif = round(abs($date-$start_date)/86400);

                if($dif>0)
                {  
                  $event_obj = $events;                                                
                  $event_obj['start_date'] = strtotime('+' . $dif . ' day',$event_obj['start_date']);                                                          
                  $event_obj['end_date'] = strtotime('+' . $dif . ' day',$event_obj['end_date']);

                  if(calendar::check_repeat_event_dif($dif,$event_obj,$repeat_end))
                  {                
                    $list[] = $event_obj;                
                  }
                }
              }
            }                                                          
          break;
        case 'weekly':  
            //check repeat events day bay day    
            for($date = $start_date; $date<=$date_to_timestamp; $date+=86400)            
            {
              if($date>$start_date)
              {
                //find days dif
                $dif = round(abs($date-$start_date)/86400);
                //find week dif
                $week_dif = calendar::weeks_dif($start_date, $date);

                if($dif>0 and (in_array(date('N',$date),explode(',',$events['repeat_days']))))
                {  
                  $event_obj = $events;                                                
                  $event_obj['start_date'] = strtotime('+' . $dif . ' day',$event_obj['start_date']);                                                          
                  $event_obj['end_date'] = strtotime('+' . $dif . ' day',$event_obj['end_date']);

                  if(calendar::check_repeat_event_dif($week_dif,$event_obj,$repeat_end))
                  {                
                    $list[] = $event_obj;                
                  }
                }
              }
            }                       

          break;            
        case 'monthly':                        
            /**
             *in calendar we display 3 month in one view
             *so we have to check difference for each month
             */

             //check 1                                      
            $date_to_timestamp2 = strtotime('-2 month',$date_to_timestamp);

            $dif =  calendar::months_dif($start_date, $date_to_timestamp2);

            if($dif>0)
            {  
              $event_obj = $events;                                                
              $event_obj['start_date'] = strtotime('+' . $dif . ' month',$event_obj['start_date']);                                                          
              $event_obj['end_date'] = strtotime('+' . $dif . ' month',$event_obj['end_date']);

              if(calendar::check_repeat_event_dif($dif,$event_obj,$repeat_end))
              {                
                $list[] = $event_obj;                
              }
            }

            //check 2
            $date_to_timestamp1 = strtotime('-1 month',$date_to_timestamp);

            $dif =  calendar::months_dif($start_date, $date_to_timestamp1);

            if($dif>0)
            {  
              $event_obj = $events;                                                
              $event_obj['start_date'] = strtotime('+' . $dif . ' month',$event_obj['start_date']);                                                          
              $event_obj['end_date'] = strtotime('+' . $dif . ' month',$event_obj['end_date']);

              if(calendar::check_repeat_event_dif($dif,$event_obj,$repeat_end))
              {                
                $list[] = $event_obj;                
              }
            }

            //check 3
            $dif =  calendar::months_dif($start_date, $date_to_timestamp);

            if($dif>0)
            {     
              $event_obj = $events;                                             
              $event_obj['start_date'] = strtotime('+' . $dif . ' month',$event_obj['start_date']);                                                          
              $event_obj['end_date'] = strtotime('+' . $dif . ' month',$event_obj['end_date']);

              if(calendar::check_repeat_event_dif($dif,$event_obj,$repeat_end))
              {                                
                $list[] = $event_obj;
              }
            }

          break;
        case 'yearly':                        
            $dif =  date('Y',$date_to_timestamp)-date('Y',$start_date);

            if($dif>0)
            {             
              $events['start_date'] = strtotime('+' . $dif . ' year',$events['start_date']);                                                          
              $events['end_date'] = strtotime('+' . $dif . ' year',$events['end_date']);

              if(calendar::check_repeat_event_dif($dif,$events,$repeat_end))
              {
                $list[] = $events;
              }
            }                                                                                               
          break;
      }            

    }

    return $list;

  }

  static public function check_repeat_event_dif($dif,$events,$repeat_end)
  {
    $check = true;

    if($dif>0)
    {
      //check interval
      if($dif/$events['repeat_interval']!=floor($dif/$events['repeat_interval'])) $check=false;            

      //check repeat limit
      if($events['repeat_limit']>0)            
      if(floor($dif/$events['repeat_interval'])>$events['repeat_limit']) $check=false;
    }
    else
    {
      $check=false; 
    } 

    //check repeat end date            
    if($repeat_end>0)
    {
      if($repeat_end<$events['start_date'])
      {
         $check=false;
      }
    }

    return $check;
  }  

}

फ़ंक्शन get_events सभी घटनाएं प्राप्त करते हैं + मेरे रास्ते में पुनरावर्ती घटनाएं 4 प्रकार की पुनरावर्ती घटनाएं होती हैं: दैनिक, साप्ताहिक, मासिक, वार्षिक + दोहराना अंतराल होता है, दिनांक समाप्त होता है और दोहराना सीमा दोहराता है।

फ़ंक्शन get_repeat_events प्रत्येक प्रकार के ईवेंट के लिए अंतर की गणना करता है और मौजूद होने पर दोहराना ईवेंट शामिल करता है।

नोट: फ़ंक्शन db_query () myslq_query या किसी अन्य चीज़ को प्रतिस्थापित किया जा सकता है

पूर्ण कैलेंडर में ईवेंट तैयार करने के लिए मैं अगले कोड का उपयोग कर रहा हूं

$list = array();        

  foreach(calendar::get_events($_GET['start'],$_GET['end'],'personal') as $events)
  {
    $start = date('Y-m-d H:i',$events['start_date']);
    $end = date('Y-m-d H:i',$events['end_date']);


    $list[] = array('id' => $events['id'],
                  'title' => addslashes($events['name']),
                  'description' => str_replace(array("\n\r","\n","\r"),'<br>',$events['description']),
                  'start' => str_replace(' 00:00','',$start),
                  'end' => str_replace(' 00:00','',$end),
                  'color'=> $events['bg_color'],                      
                  'allDay'=>(strstr($start,'00:00') and strstr($end,'00:00')),
                  'url' => url_for('ext/calendar/personal_form','id=' . $events['id'])                      
                  );      
  }

  echo json_encode($list);

यह घटना के भीतर काफी अच्छी तरह से काम करने लग रहा था: समारोह (घटना, तत्व) {}

            EXAMPLE JSON:
            var json = [{title: "All Day Event",
              start: "2015-12-22T00:00",
              end: "2015-12-22T23:55",
              dow: [2,4],
              recurstart: moment("2015-12-22").startOf("week"),
              recurend: moment("2015-12-22").endOf("week").add(1,'w')},{
              title: "Long Event",
              start: "2015-12-21T00:00",
              end: "2015-12-24T23:55",
              recurstart: moment("2015-12-21").startOf("month"),
              recurend: moment("2015-12-24").endOf("month"),
            }];

            eventRender: function(event, element){
            var theDate = moment(event.start).format("YYYY-MM-DD");
            var startDate = event.recurstart;
            var endDate = event.recurend;

            if (startDate < theDate && theDate < endDate) {
                console.log(theDate);
                }
            else {
                return event.length>0;
            }
            }, /* End eventRender */

1) JSON में प्रारंभ / समाप्ति तिथि और समय सेट करें।

2) जेएसओएन में दो कस्टम रिकर प्रारंभ करें और पुनरारंभ करें।

3) पुनरावर्ती अवधि बनाने के लिए moment.js का उपयोग करें: http://momentjs.com/docs/#/durations/ ।

4) रिकूर स्टार्ट सप्ताह की शुरुआत को इंगित करने के लिए (प्रारंभ :) तिथि का उपयोग करता है।

5) रिकूर एंड का उपयोग करता है (अंत :) सप्ताह के अंत को इंगित करने की तारीख + 1 सप्ताह जोड़ना।

6) 1, 2, 3 सप्ताह जोड़ना आवर्ती सीमा बना सकता है।

7) JSON का एक और हिस्सा जोड़ना (recurlimit: "") रिकर सीमा का प्रबंधन कर सकता है।

8) eventRender के भीतर चर का उपयोग करना - जिस तारीख को मेरा उदाहरण उपयोग करता है (दिनांक) जो क्षण (event.start) है। इसे सही ढंग से प्रारूपित करना महत्वपूर्ण है ताकि स्टार्ट / एंड / रिकरस्टार्ट इत्यादि सभी मिलान प्रारूप अर्थात (वाई वाई वाई वाई-एमएम-डीडी) http://momentjs.com/docs/#/displaying/format/ ।

9) कस्टम पुनरावृत्ति के लिए परिवर्तनीय

10) कस्टम रिकरेंड के लिए परिवर्तनीय

11) मौसम देखने के लिए एक आईएफ स्टेटमेंट का उपयोग करें (theDate) (रिकर्स्टार्ट) और (रिकरेंड) के बीच आता है - लॉग परिणाम

12) उस पैरामीटर के भीतर नहीं आने वाली अन्य घटनाओं को छिपाने के लिए लंबाई> 0 को वापस करने के लिए ELSE कथन का उपयोग करें।

13) गैर आवर्ती घटनाओं में पल होना चाहिए ("मैच शुरू करने की तारीख")। StartOf ("month") और पल ("मैच प्रारंभ दिनांक")। EndOf ("month") अन्यथा वे दिखाई नहीं देंगे।