title: Django day and time picker
body: <p>I'm trying to build my first website with django,I've accomplished user registration and login so far but now I'm stuck: I want to show to the users a weekly calendar where they can pick a day and book a gym class. 
  I tried to handle every week day like a form field but it didn't work. </p>
  
  <p>Any advice on how I should tackle this? </p>
  
  <p>I'm looking for something like an explanation/a tutorial and would avoid a github project, if possible. </p>
  
  <p>Thank you! </p>
  
  <p><strong>UPDATE</strong>
  Alrigth, thanks to the answers i got ,i did this:
  1.I register the new users in forms.py in an application called register:</p>
  
  <pre><code>from django import forms
  from django.contrib.auth import login, authenticate
  from django.contrib.auth.forms import UserCreationForm
  from django.contrib.auth.models import User
  
  
  class RegisterForm(UserCreationForm):
      first_name=forms.CharField(max_length=50)
      last_name=forms.CharField(max_length=50)
      email=forms.EmailField()
      mobile=forms.CharField(max_length=13)
  
  
      class Meta:
          model = User
          fields=['username','first_name','last_name','email','mobile','password1', 'password2']
  </code></pre>
  
  <p>2.Create a new application called reservation where in models i tried to build a new database</p>
  
  <pre><code>from django.db import models
  from register import forms
  import datetime
  
  
  class Booking(models.Model):
      class_name = models.ForeignKey('Class', on_delete=models.CASCADE)
      created_by = forms.ForeignKey('User', on_delete=models.SET_NULL, related_name="bookings")
      created_datetime = models.DateTimeField(auto_now_add=True, blank=True, editable=False)
      selected_datetime = models.DateTimeField(blank=True)
  
  
  class Class(models.Model):
       class_time=models.DateTimeField()
       class_day=models.DateField()
       MIN_PEOPLE = 2 #not less than 2 people each class
       MAX_PEOPLE = 12 #not more than 12 allowed
  </code></pre>
  
  <p>But here i got this error:</p>
  
  <pre><code>AttributeError: module 'register.forms' has no attribute 'ForeignKey'
  </code></pre>
  
  <p>3.In reservation i made a html page called reservation.html where i put my calender where i wish the user will pick a day, a class time and book it</p>
  
  <pre><code>&lt;!-- Class Time Section Begin --&gt;
  &lt;section class="classtime-section class-time-table spad"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-12 text-center"&gt;
                  &lt;div class="section-title"&gt;
                      &lt;h2&gt;Orario Classi&lt;/h2&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="classtime-table"&gt;
              &lt;table&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;Lunedì&lt;/th&gt;
                          &lt;th&gt;Martedì&lt;/th&gt;
                          &lt;th&gt;Mercoledì&lt;/th&gt;
                          &lt;th&gt;Giovedì&lt;/th&gt;
                          &lt;th&gt;Venerdì&lt;/th&gt;
                          &lt;th&gt;Sabato&lt;/th&gt;
                          &lt;th&gt;Domenica&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td class="workout-time"&gt;10.00&lt;/td&gt;
                          &lt;td class="hover-bg ts-item" data-tsmeta="crossfit"&gt;
                              &lt;span&gt;10.00 - 14.00&lt;/span&gt;
                              &lt;h6&gt;Crossfit lezione&lt;/h6&gt;
                          &lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td class="hover-bg ts-item" data-tsmeta="crossfit"&gt;
                              &lt;span&gt;10.00 - 15.00&lt;/span&gt;
                              &lt;h6&gt;Crossfit lezione&lt;/h6&gt;
                          &lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td class="hover-bg ts-item" data-tsmeta="lunge"&gt;
                              &lt;span&gt;10.00 - 13.00&lt;/span&gt;
                              &lt;h6&gt;Mobility&lt;/h6&gt;
                          &lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td class="hover-bg ts-item" data-tsmeta="lunge"&gt;
                              &lt;span&gt;10.00 - 13.30&lt;/span&gt;
                              &lt;h6&gt;Mobility&lt;/h6&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td class="workout-time"&gt;14.00&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td class="hover-bg ts-item" data-tsmeta="lunge"&gt;
                              &lt;span&gt;14.00 - 17.00&lt;/span&gt;
                              &lt;h6&gt;Weight lifting&lt;/h6&gt;
                          &lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td class="hover-bg ts-item" data-tsmeta="crossfit"&gt;
                              &lt;span&gt;14.00 - 17.00&lt;/span&gt;
                              &lt;h6&gt;Crossfit lezione&lt;/h6&gt;
                          &lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td class="hover-bg ts-item" data-tsmeta="walls"&gt;
                              &lt;span&gt;14.00 - 15.30&lt;/span&gt;
                              &lt;h6&gt;Mobility&lt;/h6&gt;
                          &lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td class="workout-time"&gt;16.00&lt;/td&gt;
                          &lt;td class="hover-bg ts-item" data-tsmeta="lunge"&gt;
                              &lt;span&gt;16.00 - 18.00&lt;/span&gt;
                              &lt;h6&gt;Lezione&lt;/h6&gt;
                          &lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td class="hover-bg ts-item" data-tsmeta="candy"&gt;
                              &lt;span&gt;16.00 - 19.00&lt;/span&gt;
                              &lt;h6&gt;Lezione&lt;/h6&gt;
                          &lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td class="hover-bg ts-item" data-tsmeta="candy"&gt;
                              &lt;span&gt;16.00 - 19.00&lt;/span&gt;
  
                          &lt;/td&gt;
                          &lt;td class="hover-bg ts-item" data-tsmeta="ppsr"&gt;
                              &lt;span&gt;16.00 - 17.00&lt;/span&gt;
                              &lt;h6&gt;&lt;/h6&gt;
                          &lt;/td&gt;
                          &lt;td class="hover-bg ts-item" data-tsmeta="murph"&gt;
                              &lt;span&gt;16.00 - 20.00&lt;/span&gt;
                              &lt;h6&gt;&lt;/h6&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td class="workout-time"&gt;18.00&lt;/td&gt;
                          &lt;td class="hover-bg ts-item" data-tsmeta="walls"&gt;
                              &lt;span&gt;18.00 - 20.00&lt;/span&gt;
                              &lt;h6&gt;&lt;/h6&gt;
                          &lt;/td&gt;
                          &lt;td class="hover-bg ts-item" data-tsmeta="ppsr"&gt;
                              &lt;span&gt;18.00 - 20.00&lt;/span&gt;
                              &lt;h6&gt;&lt;/h6&gt;
                          &lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td class="hover-bg ts-item" data-tsmeta="chelsea"&gt;
                              &lt;span&gt;18.00 - 22.00&lt;/span&gt;
                              &lt;h6&gt;&lt;/h6&gt;
                          &lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td class="hover-bg ts-item" data-tsmeta="annie"&gt;
                              &lt;span&gt;18.00 - 22.00&lt;/span&gt;
                              &lt;h6&gt;&lt;/h6&gt;
                          &lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td class="workout-time"&gt;20.00&lt;/td&gt;
                          &lt;td class="hover-bg ts-item" data-tsmeta="lunge"&gt;
                              &lt;span&gt;21.00 - 23.00&lt;/span&gt;
                              &lt;h6&gt;&lt;/h6&gt;
                          &lt;/td&gt;
                          &lt;td class="hover-bg ts-item" data-tsmeta="walls"&gt;
                              &lt;span&gt;20.00 - 22.00&lt;/span&gt;
                              &lt;h6&gt;&lt;/h6&gt;
                          &lt;/td&gt;
                          &lt;td class="hover-bg ts-item" data-tsmeta="walls"&gt;
                              &lt;span&gt;20.30 - 23.00&lt;/span&gt;
                              &lt;h6&gt;&lt;/h6&gt;
                          &lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td class="hover-bg ts-item" data-tsmeta="crossfit"&gt;
                              &lt;span&gt;22.00 - 23.00&lt;/span&gt;
                              &lt;h6&gt;&lt;/h6&gt;
                          &lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td class="hover-bg ts-item" data-tsmeta="crossfit"&gt;
                              &lt;span&gt;21.00 - 23.00&lt;/span&gt;
                              &lt;h6&gt;&lt;/h6&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;!-- Class Time Section End --&gt;
  </code></pre>
  
  <p>The thing is: i have no idea how to connect the reservation.html to the database in reservation/models.py and the User model with the booking class.</p>
  
  <p>Thank you.</p>