Skip to main content
 首页 » 编程设计

jquery之在单击 prev 按钮时使用 django View 更新 jquery fullcalendar 中的事件

2025年05月04日24emanlee

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

index.html

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

django View

    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/) 时,当月的每一天都会显示帖子数当天创建

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

我想在点击 prev 和 next 按钮时做同样的事情。所以,我决定调用另一个 django View ,传递 返回的月份和年份code>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 View 来处理这个 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 View ,monthly_posts()中的打印语句得到正确的值(假设今天是 4 月 11 日,我点击 prev 按钮,打印语句打印

monthly_posts::year= 2012 month= 3

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

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

但是,三月份的日历 View 没有显示任何事件!

当我手动输入url时

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

django View 中的打印语句正确执行

month_summary::year= 2012  month= 3 

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

并且 3 月的月 View 正确显示所有日期的事件......!

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

请您参考如下方法:

在 Django View 中使用 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/' 
});