Fahrplan App für Schienen 4

Question

Ich versuche eine Stundenplan-Setup zu erstellen, um in Verbindung mit einem meiner Modelle zu arbeiten. Bevor ich meine Frage formuliere, werde ich etwas Kontext zu dem Problem geben.

Ich habe ein Modell Termin mit den folgenden Spalten genannt:

Name(String) 
Start_time(time) 
End_time(time) 
Appt_Date(date) 

Jetzt kann ich mehrere Termine in 1 Tag hat.

Zum Beispiel lassen Sie uns sagen, dass ich die folgenden 2 Terminobjekte haben:

Appointment 1: 
Name: Makeup Appointment 
Start_time: 11:00 am 
End_time: 1:00 pm 
Date: March 30, 2016 

Appointment 2: 
Name: Daily Meetup 
Start-time: 2:00 pm 
End_time: 3:00 pm 
Date: March 30, 2016 

Ich möchte eine Datumsauswahl Form implementieren, in dem Sie ein Datum auswählen können und es würde 24 Zeilen (1 für jeden machen Stunde des Tages) und füllen Sie die Zeilen mit den Zeiten aus, die aufgrund der Termine an diesem Tag nicht verfügbar sind.

Wenn ich zum Beispiel den 30. März 2016 aus dem Datumswähler auswähle, möchte ich die 24 Zeilen rendern und die Zeilen für 11 am-1pm und 2:00 pm-3: 00pm ausgegraut haben.

Das Setup ist wie Google Kalender (wie Zeitfenster sind eingefärbt), aber mit einer täglichen Basis. Ich muss diese Zeilen nicht bearbeiten können. Ich muss sie nur ansehen und mit farbigen Zellen auf der Grundlage von Terminobjekten für diesen bestimmten Tag darstellen lassen.

Mein Problem ist, ich weiß nicht, wo ich anfangen soll, diese 24 Zeilen zu entwerfen, die mit Terminobjekten interagieren. Ich dachte, dass ich vielleicht eine Hilfsmethode aufbaue, obwohl ich selbst ziemlich verloren bin. Ich würde mich über einige Hinweise zur Vorgehensweise freuen.

Answer 1

Im Folgenden wird Ihnen helfen:

1.Create a file in initializer which contains list of available time slots like 10 am to 10 pm. 
    2.For displaying date time field , use some jquery date time picker plugin. 
    3.Fire an ajax when clicked on datetime picker. 
    4.Ajax request will come on the controller & where you have to create an active record query which will fetch all apointments according to the particular date. 
    5.MAke an array variable & store the time which are already booked in the above appointments. 
    6.Compare the available time with the booked time & edit datetimepikcer.js to shaded the booked date.