【问题标题】:updating events in jquery fullcalendar with django view on clicking prev button在单击 prev 按钮时使用 django 视图更新 jquery fullcalendar 中的事件
【发布时间】:2012-04-24 18:38:07
【问题描述】:

基于@demalexx 的reply,我在jquery fullcalendar 中创建了代码来显示我的django 应用程序的用户创建的帖子数。我将日历放在index.html 中并创建了django 视图来填充事件数据。

index.html

...
$(document).ready(function() {
   $('#calendar').fullCalendar({
       events: {{posts_counts|safe}}
});
...

django 视图

    def index(request){
      now=datetime.datetime.now()
      cday=now.day
      cmonth=now.month
      cyear=now.year
      for i in range(1,cday+1):
        posts_count.append({'title':str(Post.objects.filter(postauthor=request,user,posteddate__year=current_year,posteddate__month=current_month,posteddate__day=i).count()),'start':now.strftime("%Y-%m-"+str(i)),'end':now.strftime("%Y-%m-"+str(i))})}
      return render(request, 'index.html',{'posts_counts':simplejson.dumps(posts_counts)})

在 urls.py 中,我把 url 作为

url(r'^$', 'myapp.views.index',{}, name = 'home'),

现在,一切正常。当我转到主页(http://127.0.0.1:8000/myapp/)时,当月的每一天都会显示当天创建的帖子数

问题::如何在点击上一个、下一个按钮时做同样的事情?

我想在点击prevnext 按钮时做同样的事情。所以,我决定调用另一个django 视图,传递fullCalendar('getDate') 方法返回的月份和年份。我这样编码。

index.html

...
    $(document).ready(function() {
            $('#calendar').fullCalendar({
                events: {{entry_count|safe}}
            });

            $('.fc-button-prev').click(function(){

                var d=$('#calendar').fullCalendar('getDate');
                var month=d.getMonth()+1;
                var year=d.getFullYear();              
                    //need to call django view with these values...        
            $.ajax({
         url:'/myapp/monthly_posts/'+year+'/'+month,
             type:"GET",
             success:function(){
             alert("done");                         
            },
          }
        );
        });

            $('.fc-button-next').click(function(){
                   //alert('next is clicked, do something');
                       //blank for now
                });

        });

最后,我编写了 django 视图来处理这个 get 请求——它是在单击 prev 按钮时发送的

def monthly_posts(request,year,month):
    print 'monthly_posts::year=',year,' month=',month    
    posts_counts=[]
    #find number of days in month and feed to forloop
    days_in_month=calendar.monthrange(int(year), int(month))[1]
    for i in range(1,days_in_month+1):
        cdate=datetime.datetime(int(year),int(month),i)
        posts_counts.append({
                              'title':str(Post.objects.filter(postauthor=request.user,posteddate__year=year,posteddate__month=month,posteddate__day=i).count()),
                              'start':cdate.strftime("%Y-%m-%d"),
                              'end':cdate.strftime("%Y-%m-%d")
                              })
    dumped=simplejson.dumps(posts_counts)
    print 'dumped posts=',dumped
    return render(request, 'index.html',{'posts_counts':dumped})

也在 urls.py 中

url(r'^monthly_posts/(?P<year>\d{4})/(?P<month>\d{1,2})/$','myapp.views.monthly_posts',{})

这里是事情不完全工作的时候..当点击prev按钮时,警报框按预期弹出然后执行django视图,monthly_posts()中的打印语句得到正确的值(假设今天是april 11,我点击prev按钮,打印语句打印

monthly_posts::year= 2012 月= 3

这是正确的..即 2012 年 3 月,因为我的 javascript 代码将 1 添加到月份编号(否则 2 代表 3 月,因为基于 0 的 javascript date.getMonth()

它还在视图中的最后一个打印语句中正确输出了 json 转储。我检查了那个月的帖子。那里没有问题。

但是,3 月份的日历视图不显示任何事件!

当我手动输入网址时

http://127.0.0.1:8000/myapp/monthly_posts/2012/3/

django 视图中的打印语句正确执行

month_summary::year= 2012  month= 3

但是,月份视图仍然是当前月份的视图,即四月..我想这是可以预料的.. 当我点击上一个按钮时,惊喜来了, 提示框正确弹出,

3 月的月份视图正确显示所有日期的事件..!

对此我有点困惑..如何才能在单击 prev 按钮时正确显示事件?我想我在这里遗漏了一些关于 ajax 和 django 工作方式的基本知识。

【问题讨论】:

    标签: jquery python ajax django fullcalendar


    【解决方案1】:

    在 Django 视图中使用 Ajax:

    def index(request):
        if request.is_ajax():
            return get_monthly_posts(request.GET['start'], request.GET['end'])
        return TemplateResponse(request, 'index.html', {})
    

    准备响应:

    def get_monthly_posts(start, end):
        #prepare data_list using start nad end variables
        #remember that start/end variables are in timestamp
    
        return HttpResponse(simplejson.dumps(data_list), mimetype='application/javascript')
    

    urls.py:

    url(r'^index/', 'myapp.views.index', name='index')
    

    index.html:

    $('#calendar').fullCalendar({
        events: '/index/'
    });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-01-13
      • 1970-01-01
      • 2014-09-11
      • 1970-01-01
      • 1970-01-01
      • 2023-03-19
      • 2018-05-31
      • 1970-01-01
      相关资源
      最近更新 更多