fullCalendar动态获取数据

简介:

422101-20160822153352433-1415956208.png
422101-20160822153357355-1206746957.png

fullCalendar http://fullcalendar.io/docs/event_data/events_function

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next',
        center: 'title',
        right: 'today'
    },
    defaultDate: '2016-08-20',
    lang: 'zh-cn',
    buttonIcons: false, // show the prev/next text
    weekMode: 'liquid',
    events: function(start,end,timezone, callback) {
        var date = this.getDate().format('YYYY-MM');
        $.ajax({
            url: '?m=home&c=product&a=ajax&todo=ajaxGetProductMonthPrice',
            dataType: 'json',
            data: {
                id:{$id},
                date: date,
            },
            success: function(json) { // 获取当前月的数据
                var events = [];
                if (json.status == '1') {
                    $.each(json.info,function(i,c) {
                        if (c.is_special == '1') {
                            events.push({
                                title: '¥'+c.price+','+c.stock+'套',
                                start: c.date , // will be parsed
                                color: '#FFEBAC'
                            });
                        } else {
                            events.push({
                                title: '¥'+c.price+','+c.stock+'套',
                                start: c.date , // will be parsed
                                color: '#BEEABE'
                            });
                        }
                        
                    });
                }
                callback(events);
            }
        });
    }
});

var date = this.getDate().format('YYYY-MM');
每次点击上一月,下一月都会获取月份。
把月份传入后台,获取数据。

$id  = trim($_REQUEST['id']);
$date= trim($_REQUEST['date']);
$r = $this->product_db->get_one(array('id'=>$id));
if (empty($r)) { // 不存在
    $rdata['status'] = 2;
    $rdata['msg']    = '房源不存在';
} else {
    $rdata['status'] = 1;
    $rdata['msg']    = '获取成功';
    // 获取目标月份对应的数据
    $special_type = $r['special_type']; // 0 无特价 1 周五,周六 2 周六,周日 3 周五,周六,周日
    $special_price= $r['special_price'];
    $price        = $r['price'];
    $stock        = $r['num'];
    $days = get_day($date,'2');
    foreach ($days as $k => $day) {
        $week = get_week($day);
        $info[$k]['date'] = $day;
        switch ($special_type) {
            case '0':
                $info[$k]['price'] = $price;
                $info[$k]['is_special']= '0';
                break;
            case '1':
                if (in_array($week,array('星期五','星期六'))) {
                    $info[$k]['price'] = $special_price;
                    $info[$k]['is_special']= '1';
                } else {
                    $info[$k]['price'] = $price;
                    $info[$k]['is_special']= '0';
                }
                break;
            case '2':
                if (in_array($week,array('星期六','星期日'))) {
                    $info[$k]['price'] = $special_price;
                    $info[$k]['is_special']= '1';
                } else {
                    $info[$k]['price'] = $price;
                    $info[$k]['is_special']= '0';
                }
                break;
            case '3':
                if (in_array($week,array('星期五','星期六','星期日'))) {
                    $info[$k]['price'] = $special_price;
                    $info[$k]['is_special']= '1';
                } else {
                    $info[$k]['price'] = $price;
                    $info[$k]['is_special']= '0';
                }
                break;
            default:
                
                break;
        }
        $info[$k]['isRent'] = '1'; // 1表示可租
        $info[$k]['stock']  = $stock;
    }

    $rdata['info'] = $info;
}

exit(json_encode($rdata));
break;

get_day方法,获取当月的每天日期

/**
 * 获取当月天数
 * add by Jim
 * @param  $date 
 * @param  $rtype  1天数 2具体日期数组
 * @return 
 */
function get_day( $date ,$rtype = '1')   
{
    $tem = explode('-' , $date);       //切割日期  得到年份和月份
    $year = $tem['0'];
    $month = $tem['1'];
    if( in_array($month , array( 1 , 3 , 5 , 7 , 8 , 01 , 03 , 05 , 07 , 08 , 10 , 12)))
    {
        // $text = $year.'年的'.$month.'月有31天';
        $text = '31';
    }
    elseif( $month == 2 )
    {
        if ( $year%400 == 0  || ($year%4 == 0 && $year%100 !== 0) )        //判断是否是闰年
        {
            // $text = $year.'年的'.$month.'月有29天';
            $text = '29';
        }
        else{
            // $text = $year.'年的'.$month.'月有28天';
            $text = '28';
        }
    }
    else{

        // $text = $year.'年的'.$month.'月有30天';
        $text = '30';
    }

    if ($rtype == '2') {
        for ($i = 1; $i <= $text ; $i ++ ) {
            if ($i < 10) {
                $i = '0'.$i;
            }
            $r[] = $year."-".$month."-".$i;
        }
    } else {
        $r = $text;
    }
    return $r;
}

get_week获取具体日期对应的星期几,根据后台数据,设置返回信息。周末特价。

/**
 * 获取星期几
 * add by Jim
 */function get_week($date)//强制转换日期格式'Y-m-d'//封装成数组"-"//参数赋值//年0//月,输出2位整型,不够2位右对齐'%02d'1//日,输出2位整型,不够2位右对齐'%02d'2//时分秒默认赋值为0;0//转换成时间戳//获取数字型星期几"w"//自定义星期数组// $weekArr=array("7","1","2","3","4","5","6");array"星期日""星期一""星期二""星期三""星期四""星期五""星期六"//获取数字对应的星期return
相关文章
基于element-plus实现vue3+ts后台管理系统的组件封装(只需传入配置对象,就可以渲染出一个页面(表单+表格))
基于element-plus实现vue3+ts后台管理系统的组件封装(只需传入配置对象,就可以渲染出一个页面(表单+表格))
|
12月前
|
API
react+ts+hook封装一个table分页组件(建议收藏,直接使用)
react+ts+hook封装一个table分页组件(建议收藏,直接使用)
145 0
|
12月前
|
API
react+ts+hook封装一个table分页组件(建议收藏,直接使用)(1)
react+ts+hook封装一个table分页组件(建议收藏,直接使用)
68 0
|
12月前
react+ts+hook封装一个table分页组件(建议收藏,直接使用)(2)
react+ts+hook封装一个table分页组件(建议收藏,直接使用)
95 0
|
JavaScript 前端开发 UED
组件库实战 | 用vue3+ts实现全局Header和列表数据渲染ColumnList
最近在用 vue3 和 ts 捣鼓一些小工具,发现平常开发中一个很常见的需求就是,数据列表的渲染。现在重新学习,发现我在学 vue2 时的很多设计规范和逻辑都考虑的不是特别妥当。 因此,写下这篇文章,记录组件设计中数据列表渲染和全局头部的设计。
组件库实战 | 用vue3+ts实现全局Header和列表数据渲染ColumnList
|
前端开发
Vue3+TS实现自定义input组件的验证功能
关于input的组件,其中有一个必不可少的属性就是输入验证,这篇文章教大家如何给自己定义的input组件添加验证,以邮箱输入框为例,大家学会了可以自行拓展
812 0
Vue3+TS实现自定义input组件的验证功能
|
存储 NoSQL JavaScript
使用TS封装操作MongoDB数据库的工具方法
使用TS封装操作MongoDB数据库的工具方法
|
前端开发 JavaScript 索引
React中的TS类型过滤原来是这么做的!
大家好,我是零一,相信大家在阅读同事写的代码或者优秀的开源库的代码时,一定见过各种各样的风骚的TS写法,不花点时间下去根本看不懂,换作是我们,可能就直接一个 any 完事了,但是真正当项目体积变大后,你会发现这些 TS骚操作真的很重要,因为它能很好地帮助你做静态类型校验 今天就来介绍一个在其它开源库中见到的既花里胡哨,又实用的TS类型——TS类型过滤
227 0
React中的TS类型过滤原来是这么做的!
Angular input控件的click事件响应处理的调用上下文
Angular input控件的click事件响应处理的调用上下文
115 0
Angular input控件的click事件响应处理的调用上下文
|
JavaScript 前端开发
Angular 页面元素的DOM级别的删除过程
Angular 页面元素的DOM级别的删除过程
107 0
Angular 页面元素的DOM级别的删除过程