JavaScript Calendar

Posted by Calvin on January 28, 2022 at 1:21 PM

Categories: javascript django

I now have a basic timeslot calendar up locally on the lesson scheduling app I'm working on. I still need to figure out exactly how I want it to look and function, but happy with what I have so far. Working on this part has helped me refresh some of my JavaScript/JQuery knowledge and I'm really enjoying it.

Updating database onclick()

Posted by Calvin on January 21, 2022 at 5:43 PM

Categories: django

I have some basic functionality working with the schedular app I'm building in django. My most recent task was figuring out how to update an entry in my database at the click of the button so the teachers can mark a lesson timeslot as confirmed, and show the reflected schedule on both the teacher's home page and the student's homepage.

To do so, I had to first create a new view "confirm_timeslot" that would take both the teacher_slug and timeslot_slug as arguments, then updating the boolean "confirmed" field in the database to True, and then return the JsonResponse. I also had to add a new url in urls.py teacher-home/<slug:teacher_slug>/<int:timeslot_id> and point it at the confirm_timeslot view.

views.py:

def confirm_timeslot(request, teacher_slug, timeslot_id):
    selected_timeslot = TimeSlot.objects.get(id=timeslot_id)
    selected_timeslot.confirmed = True
    selected_timeslot.save(update_fields=['confirmed'])
    current_teacher = selected_timeslot.teacher_id
    return JsonResponse({'result': 'ok'})

urls.py:

path('schedular/teacher-home/<slug:teacher_slug>/<int:timeslot_id>', views.confirm_timeslot, name='confirm-timeslot')

I then had to add a button next to each timeslot entry in the html template for the teacher's homepage and add some data attributes for both the teacher_slug and timeslot_id of the request so I could pass those to my javascript/ajax call, and add the javascript function as an onclick.

teachers-home.html:

<div class="confirm-column">
  {% if not timeslot.confirmed %}
      {% csrf_token %}
      <button id="confirm-btn" onclick="confirm()" data-teacherslug="{{ slug }}" data-timeslotid="{{ timeslot.id }}">Confirm</button>
  {% else %}
      <span id="checkmark"></span>
  {% endif %}
</div>

Lastly, I had to create the confirm() javascript function which takes the passed teacher_slug and timeslot_id and send a request to the appropriate url with the variables inserted, and then update the related confirm-column div's html.

base.js:

function confirm() {
    // debugger;
    var teacherslug = $('#confirm-btn').data('teacherslug');
    var timeslotid = $('#confirm-btn').data('timeslotid')
    $.ajax({
        url: "/schedular/teacher-home/"+teacherslug+"/"+timeslotid,
        success: function(result) {
            $(".confirm-column"+timeslotid).load("/schedular/teacher-home/"+teacherslug+" .confirm-column"+timeslotid)
        }
    })
}

I learned a lot about how django and javascript/ajax can work together when solving this problem, and I'm thankful for my dev friends as well as StackOverflow for helping me when I got stuck. Looking forward to continuning to flesh out this project and will continue to post updates.

Django Project

Posted by Calvin on January 17, 2022 at 7:20 PM

Categories: django

This weekend I started working on a project in Django which will be a scheduling app for teachers and students. I'm building it to both increase my knowledge and create something that my brother can use for his upcoming music school. I have a basic skeleton completed, and my next steps are to add more functionality as well as work on the design and layout.