calendar.js.jsx

var Calendar = React.createClass({
  getInitialState(){
    var data = this.getDataFromURL();
    label = data[0] || 'Today';
    calendarView = data[1] || this.props.calendarView || 'tableDay';
    date = data[2] || moment();

    return({
      currentClinicianId: this.props.currentClinicianId,
      currentClinician: this.props.currentClinician,
      hiddenDays: [],
      calendarView: calendarView ,
      clinicians: this.props.clinicians,
      currentDate: moment(date),
      todayLabel: label ,
      eventsCallBack: null,
      start: null,
      end: null,
      clinicianTimeZone: this.props.clinicianTimeZone,
      appointments: []
    })
  },

  componentWillMount(){
    var that = this;
  },

  componentDidMount() {
    var that = this;
    var calendar = $('#calendar');
    var picker = $('.date_picker');
    var eventsCallBack = null;

    picker.datepicker({autoclose: true, forceParse: false}).on('changeDate',function(e){
      that.renderCalendarWithDate(e.date)
    });

    calendar.fullCalendar({
      lazyFetching: false,
      defaultView: that.state.calendarView,
      previousView: null,
      fieldNames: that.fieldNames(),
      fieldWidths: that.fieldWidths(),
      header: false,
      hiddenDays: that.state.hiddenDays,
      allDaySlot: false,
      minTime: 6,
      maxTime: 18,
      eventStartEditable: {
        month: false,
        staff: false,
        '': true
      },
      clinicians: that.state.clinicians,
      eventDurationEditable: false,
      ignoreTimezone: true,
      eventRender: function(event, element, view){
        var _event = event;
        // if (view.name == 'tableDay') {
        $('.badge', element).popover({
          content: function(){
            var el = $(this).parent().clone();
            el.find('.badge').remove();
            return el.html();
          },
          html: true,
          trigger: 'manual',
          placement: 'left',
          title: 'Reminders',
          container: 'body'
        }).click(function(e){
          var jsEvent = e;
          var badges = $('.badge');
          $('.popover').hide();
          for (var i=0; i<badges.length; i++){
            var badge = badges[i];
            if (jsEvent.target == badge) {
              $(badge).popover('toggle');
              $('span','.popover').click(function(e){
                that.hidePopovers();
                var target = $(e.target);
                get('controller').send('patientLink', _event.patient_id, target.data('action'), null, target);
              });
              $('.reminder_item', '.popover').click(function(e){
                var jsEvent = e;
                var reminder_items = $('.reminder_item');
                for (var i=0; i<reminder_items.length; i++){
                  var reminder_item = reminder_items[i];
                  if (jsEvent.target == reminder_item) {
                    that.removeReminder(this.dataset.id)
                  }
                }
                if($(this).parent().parent().children("div[id^='reminder_']").length == 1){
                  $(badge).popover('hide');
                } else {
                  $(this).parent().hide();
                }
                e.preventDefault();
                e.stopPropagation();
              });
            } else {
              $(badge).popover('hide');
            }
          }
          e.preventDefault();
          e.stopPropagation();
        });

        $('.reminder_item', element).click(function(e){
          var jsEvent = e;
          var reminder_items = $('.reminder_item');
          for (var i=0; i<reminder_items.length; i++){
            var reminder_item = reminder_items[i];
            if (jsEvent.target == reminder_item) {
              that.removeReminder(this.dataset.id)
            }
          }
          e.preventDefault();
          e.stopPropagation();
        });

        // Putting staff calendar at the current date if it is visible---not sure it should go here
        // but if I put it other places it gets overriden by something else I'm trying to locate.
        if($('.table-today').position()){
          // $('.time-table-container').scrollTop($('.table-today').position().top);
          $('.slot-scroller').scrollTop($('.table-today').position().top);
        }
        // } else {
        //   element.tooltip({
        //     title: event.description,
        //     container: 'body',
        //     delay: {show:500, hide:100}
        //   });
        // }

      },
      eventDragStart: function(event, jsEvent, ui, view){
        $('.badge').popover('hide');
      },
      eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view){
        var selectedAppointment = that.state.appointments.filter(function(apt){return apt.id == event.id})[0]
        selectedAppointment.start_at = that.dateInTimezone(event.start);
        selectedAppointment.end_at = that.dateInTimezone(event.end);

        if(selectedAppointment.frequency != "One Time"){
          $( "<div class='modal ' title='Move all appointments?'><p><span class='ui-icon ui-icon-alert' style='float:left; margin:12px 12px 20px 0;'></span>This is a recurring appointment. Move all appointments that follow?</p></div>" ).dialog({
            dialogClass: "no-close",
            resizable: false,
            height: "auto",
            width: 400,
            modal: true,
            buttons: {
              Yes: function() {
                $( this ).dialog( "close" );
                that.moveAppointment(selectedAppointment)

              },
              No: function() {
                $( this ).dialog( "close" );
                selectedAppointment.frequency = 'One Time';
                selectedAppointment.parent_id = null;
                that.moveAppointment(selectedAppointment);
              }
            }
          });
        }
        else{
          that.moveAppointment(selectedAppointment)
        }

      },
      eventClick: function(event, jsEvent, view){
        var selectedAppointment = that.state.appointments.filter(function(apt){return apt.id == event.id})[0]
        var date = event.start;
        var target = $(jsEvent.target);

        if(target.attr('data-action') == 'payment'){
          $("#payment_modal").modal('show');
          //$("#payment_modal select#patient_id").val(selectedAppointment.patient.id).trigger('change')
          $("#payment_modal select#patient_id").val(selectedAppointment.patient.id).trigger('change').chosen('destroy').chosen()
        }
        else if (target.hasClass('patient_link') && !target.hasClass('noclick')) {
          window.location = "/patients/"+selectedAppointment.patient.id+"/progress_notes/new?appt="+selectedAppointment.id
        }
        else if (target.hasClass('reminder_item') || $(this).find('span').hasClass('noclick')){
          return false;
        }
        else
        {
          try{
            ReactDOM.unmountComponentAtNode(document.getElementById('appointment_modal_panel'));
          }
          catch(e) {}
          ReactDOM.render(
            <AppointmentForm date={date} renderCalendarWithDate={that.renderCalendarWithDate} selectedAppointment={selectedAppointment} eventsCallBackHandler={eventsCallBack} loadEventsHandler={that.loadEvents} clinicians={that.state.clinicians} currentClinician={that.state.currentClinician} />,
            document.getElementById('appointment_modal_panel')
          );
          $("#appointment_modal").modal('show');
        }
      },
      dayClick:function(date, allDay, jsEvent, view, clinician_id){
        date = date == 'Invalid Date' ? that.state.currentDate : date;
        try{
          ReactDOM.unmountComponentAtNode(document.getElementById('appointment_modal_panel'));
        }
        catch(e) {}

        ReactDOM.render(
            <AppointmentForm date={date} eventsCallBackHandler={eventsCallBack} loadEventsHandler={that.loadEvents} clinicians={that.state.clinicians} currentClinician={that.state.currentClinician} clinicianTimeZone={that.state.clinicianTimeZone} />,
            document.getElementById('appointment_modal_panel')
        );
        $("#appointment_modal").modal('show');
      },
      events: function(start, end, callback){
        that.loadEvents(start, end, callback);
        eventsCallBack = callback
      },
      loading: function( isLoading, view ){
        if(isLoading)
          $(".loading_calendar").show();
        else
          $(".loading_calendar").hide();
      }
    });


    window.onpopstate = function (event) {
      if (event.state) {
        $('#calendar').fullCalendar( 'gotoDate', moment(event.state.date)._d).fullCalendar('changeView',event.state.calendarView);
        that.setState({currentDate: moment(event.state.date), calendarView: event.state.calendarView, todayLabel: event.state.todayLabel})
      }
    }

  },

  moveAppointment(appointment){
    $.ajax({
      url: url = "/api/v2/appointments/" + appointment.id,
      type: 'PUT',
      data: {appointment: appointment},
      beforeSend: function () {
        //$(".loading_calendar").show()
      },
      success: function(response){
        //$("#calendar").fullCalendar('removeEvents');
        //$("#calendar").fullCalendar('refetchEvents');
        //$(".loading_calendar").hide();
      }
    })
  },

  removeReminder(id){
    var that = this;
    $.ajax({
      url: "/api/v2/reminders/" + id,
      type: 'DELETE',
      success: function (response) {
        that.renderCalendarWithDate(that.state.currentDate);
      }
    })
  },

  renderCalendarWithDate(date){
    var that = this;
    date = date || that.state.currentDate;
    date = moment(date);
    that.setState({currentDate: date}, function () {
      that.changeURL()
      $("#calendar").fullCalendar('refetchEvents');
      $('#calendar').fullCalendar( 'gotoDate', date._d);
    })
  },

  includeLocation(){
    var that = this;
    return that.state.currentClinician.locations.length > 0
  },
  clinicianToBrowser(date){
    return moment(this.convertDate(date).format('ddd MMM D YYYY HH:mm:ss')).toDate();
  },

  convertDate(date){
    return moment(date).tz(this.state.clinicianTimeZone);
  },

  clinicianHourToBrowser(hour){
    return moment(this.convertDate(moment().hour(hour)).format('ddd MMM D YYYY HH:mm:ss')).hours();
  },

  dateInTimezoneMoment(date){
    var m = moment(date);

    // get a moment in the timezone of the clinician
    var zone = moment(m).tz(this.state.clinicianTimeZone);

    // build a date string by swapping the browser timezone with the clinician timezone
    var timezone = (zone.zone()*100/60) + "";
    if(timezone.length == 3){
      timezone = "0" + timezone;
    } else if(timezone.length > 4){
      timezone = timezone(0,3);
    } else if(timezone.length == 2){
      timezone = "0" + timezone + "0"
    }
    var dateString = m.format('ddd MMM D YYYY HH:mm:ss') + " GMT-" + timezone + " (" + zone.zoneAbbr() + ")";

    // parse the date string, converting it back to the browser timezone
    return moment(dateString);
  },

  dateInTimezone(date){
    return this.dateInTimezoneMoment(date).toDate();
  },

  remindersArray(json){
    return JSON.parse(json);
  },

  previous(){
    var that = this;
    var calendarView = that.state.calendarView;
    var currentDate = that.state.currentDate;
    var hiddenDays = that.state.hiddenDays;

    if (calendarView == 'tableDay') {
      // navigating prev from mon and sun is hidden
      if (currentDate.weekday() == 1 && hiddenDays.indexOf(0) != -1) {
        // sat is hidden as well so skip 2 days
        if (hiddenDays.indexOf(6) != -1) {
          currentDate = currentDate.subtract('days', 3);
          // sat is not hidden so only skip one day
        } else {
          currentDate = currentDate.subtract('days', 2);
        }
      } else {
        // navigating prev from sun and sat is hidden so skip one day
        if (currentDate.weekday() == 0 && hiddenDays.indexOf(6) != -1) {
          currentDate = currentDate.subtract('days', 2);
        } else {
          currentDate = currentDate.subtract('days', 1);
        }
      }
    } else if (calendarView == 'agendaWeek') {
      currentDate = currentDate.subtract('weeks', 1);
    } else if (calendarView == 'month') {
      currentDate = currentDate.subtract('months', 1);
    } else if (calendarView == 'agendaStaff') {
      currentDate = currentDate.subtract('weeks', 1);
    }
    $("#calendar").fullCalendar( 'gotoDate', currentDate._d)
    that.setState({currentDate: currentDate}, function () {
      that.changeURL()
    });
  },

  next(){
    var that = this;
    var calendarView = that.state.calendarView;
    var currentDate = that.state.currentDate;
    var hiddenDays = that.state.hiddenDays;

    if (calendarView == 'tableDay') {
      // navigating next from fri and sat is hidden
      if (currentDate.weekday() == 5 && hiddenDays.indexOf(6) != -1) {
        // sun is hidden as well so skip 2 days
        if (hiddenDays.indexOf(0) != -1) {
          currentDate = currentDate.add('days', 3);
          // sun is not hidden so only skip one day
        } else {
          currentDate = currentDate.add('days', 2);
        }
      } else {
        // navigating next from sat and sun is hidden so skip one day
        if (currentDate.weekday() == 6 && hiddenDays.indexOf(0) != -1) {
          currentDate = currentDate.add('days', 2);
        } else {
          currentDate = currentDate.add('days', 1);
        }
      }
    } else if (calendarView == 'agendaWeek') {
      currentDate = currentDate.add('weeks', 1);
    } else if (calendarView == 'month') {
      currentDate = currentDate.add('months', 1);
    } else if (calendarView == 'agendaStaff') {
      currentDate = currentDate.add('weeks', 1);
    }
    $("#calendar").fullCalendar( 'gotoDate', currentDate._d)
    that.setState({currentDate: currentDate}, function () {
      that.changeURL()
    });
  },

  today(){
    var that = this;
    var date = moment().startOf('day');
    that.renderCalendarWithDate(date);
  },

  day(){
    var date = this.bestDate();
    this.set('currentDate', date);
    this.transitionToRoute('schedules.day', TM.Dates.forUrl(date));
  },

  week(){
    var date = this.bestDate();
    this.set('currentDate', date);
    this.transitionToRoute('schedules.week', TM.Dates.forUrl(date));
  },

  month(){
    this.transitionToRoute('schedules.month', TM.Dates.forMonth(this.get('currentDate')));
  },

  displayingToday(){
    if (calendarView == 'tableDay') {
      return currentDate.unix() == currentDate.unix();
    } else if (calendarView == 'agendaWeek') {
      return moment(currentDate).startOf('week').unix() == moment(currentDate).startOf('week').unix();
    } else if (calendarView == 'month') {
      return moment(currentDate).startOf('month').unix() == moment(currentDate).startOf('month').unix();
    } else if (calendarView == 'agendaStaff') {
      return moment(currentDate).startOf('week').unix() == moment(currentDate).startOf('week').unix();
    }
  },

  todayLabel(){
    var that = this;
    var calendarView = that.state.calendarView;
    var label = 'Today';
    if (calendarView == 'tableDay') {
        label = 'Today';
    } else if (calendarView == 'agendaWeek') {
        label = 'This Week';
    } else if (calendarView == 'month') {
        label = 'This Month';
    } else if (calendarView == 'agendaStaff') {
        label = 'Week';
    }
    that.setState({todayLabel: label})
  },

  displayingDayView(e){
    var that = this;
    $(".calendarview").removeClass('active')
    $(e.target).addClass('active')
    that.setState({calendarView: 'tableDay', todayLabel: "Today"}, function () {
      $('#calendar').fullCalendar('changeView','tableDay');
      that.changeURL()
    })
  },

  displayingWeekView(e){
    var that = this;
      $(".calendarview").removeClass('active')
      $(e.target).addClass('active')
    that.setState({calendarView: 'agendaWeek', todayLabel: "This Week"}, function () {
      $('#calendar').fullCalendar('changeView','agendaWeek');
      that.changeURL()
    })
  },

  displayingMonthView(e){
    var that = this;
      $(".calendarview").removeClass('active')
      $(e.target).addClass('active')
    that.setState({calendarView: 'month', todayLabel: "This Month"}, function(){
      $('#calendar').fullCalendar('changeView','month');
      that.changeURL()
    })
  },

  displayingStaffView(e){
    var that = this;
      $(".calendarview").removeClass('active')
      $(e.target).addClass('active')
      that.setState({calendarView: 'agendaStaff', todayLabel: "Week"}, function () {
      $('#calendar').fullCalendar('changeView','agendaStaff');
      that.changeURL()
    })
  },

  staff(){
    var date = this.bestDate();
    this.set('currentDate', date);
    this.transitionToRoute('schedules.staff', TM.Dates.forUrl(date));
  },

  hidePopovers(){
    $('.badge').popover('hide');
  },

  print(){
    var that = this;
    var url = window.location.href;
    var parts = url.split('#');
    url = parts[0] + "?" + 'is_printing=true&clinician_id=' + that.state.currentClinician.id;
    if(parts.length > 1){
      url += '#' + parts[1];
    }
    window.open(url);
  },

  changeURL(){
    var that = this;
    var date = moment(that.state.currentDate).format('YYYY-MM-DD');
    var mode = that.state.calendarView.replace("agenda","").replace("table","").toLowerCase();
    var label = that.state.todayLabel;

    var stateObj = { date: date, calendarView: that.state.calendarView, todayLabel: label };
    var hashString = "#/schedules/"+mode+"/" + stateObj['date'];
    history.pushState(stateObj, null, hashString);
  },
  getDataFromURL(){
    var urlHashParams = window.location.hash.split("/");
    var date = urlHashParams[3];
    var calendarView = urlHashParams[2];
    var label = null;

    if(calendarView == 'staff') calendarView = 'agendaStaff';
    if(calendarView == 'day') calendarView = 'tableDay';
    if(calendarView == 'week') calendarView = 'agendaWeek';
    if(calendarView == 'month') calendarView = 'month';

    if (calendarView == 'tableDay') {
      label = 'Today';
    } else if (calendarView == 'agendaWeek') {
      label = 'This Week';
    } else if (calendarView == 'month') {
      label = 'This Month';
    } else if (calendarView == 'agendaStaff') {
      label = 'Week';
    }
    return [label, calendarView, date]
  },

  fieldNames(){
    var that = this;
    var currentClinician = that.state.currentClinician;
    if(currentClinician.is_limited_clinician_x){
      var names = ['Patient', 'Code', 'Provider', 'Pat. Bal.'];
    } else if (currentClinician.is_limited_clinician){
      var names = ['Patient', 'Code', 'Provider'];
    } else {
      var names = ['Patient', 'Code', 'Provider', 'CC', 'Pat. Bal.', 'Ins. Bal.'];
    }
    if(that.includeLocation()){
      names.push('Location');
    }
    names.push('Reminder');
    return names;
  },

  fieldWidths(){
    var that = this;
    var current_user = that.state.currentClinician;
    if(current_user.is_limited_clinician_x){
      var widths = ['120px', '50px', '100px', '60px'];
    } else if(current_user.is_limited_clinician){
      var widths = ['120px', '50px', '100px'];
    } else {
      var widths = ['120px', '50px', '100px', '40px', '60px', '60px'];
    }
    if(this.includeLocation()){
      widths.push('100px');
    }
    widths.push('auto');
    return widths;
  },

  loadEvents(start, end, calendarCallback){
    var that = this;
    var appointments = [];
    var events = [];
    var current_user = null;

    var data = that.getDataFromURL();
    start = data[2] || start;

    var date = moment(start).format("YYYY-MM-DD");
    $.ajax({
      cache: false,
      url: "/api/v2/appointments?date="+date+"&clinician_id="+that.state.currentClinician.id + "&calendar_view=" + that.state.calendarView,
      type: 'GET',
      success: function(response){
        appointments = response.appointments;
        current_user = response.current_user;
        var timeZone = that.state.clinicianTimeZone;
        var include_location = true;
        appointments.forEach(function(appointment){
          var start_at = appointment.start_at;
          //if (start_at > start && start_at < end) {
          events.push(that.buildEvent(appointment, timeZone, include_location,current_user));
          //}
        }, this);
        calendarCallback(events);
        that.setState({appointments: appointments})
      }
    });
  },

  buildEvent(appointment, timeZone, includeLocation,current_user){
    var that = this;
    var calendarView = that.state.calendarView;
    var ev = {
      id: appointment.id,
      start: this.clinicianToBrowser(appointment.start_at),
      end: this.clinicianToBrowser(appointment.end_at),
      allDay: false,
      clinician_id: that.state.currentClinician.id
    };

    // calendar event
    if (appointment.service_code.code == '') {
      var title = appointment.memo;
      if (appointment.all_day){
        title += " (all day)";
      }
      ev.title = title;
      ev.backgroundColor = '#FFF';
      ev.className = 'tm_calendar_event';
      ev.fields = this.fieldsForCalendarEvent(ev.title);
      ev.cols = 1;


      // an appointment
    } else {
      ev.patient_id = appointment.patient.id;

      var reminders_array = this.remindersArray(appointment.reminders_cache);
      ev.fields = this.fieldsForAppointment(appointment, reminders_array,current_user);
      ev.remindersCount = reminders_array.length;

      var cc = appointment.patient.cc ? "-CC" : "";

      if(calendarView == 'agendaStaff'){
        ev.title = this.patientHtml(appointment) + ' - ' +
                appointment.location.informal_name;
      } else {
        ev.title = this.patientHtml(appointment) + ' - ' +
                appointment.service_code.code;
      }

      // missed appointment
      if (appointment.missed) {
        ev.backgroundColor = 'lightgray';
        ev.title += ' (missed)';
        ev.className = 'missed';
      }
      ev.description = appointment.patient.firstname + ' ' +
              appointment.patient.lastname + ', ' +
              appointment.service_code.code;

      if(this.includeLocation){
        ev.description += appointment.address ? " @ " + appointment.address + " " : "";
      }

      ev.description +=  ', ' + accounting.formatMoney(appointment.patient.patient_balance) + ' (pat' + cc + '), ' +
              accounting.formatMoney(appointment.patient.insurance_balance) + ' (ins-' + appointment.is_self_pay ? 'Cash Pay' : appointment.patient.payor + ') - ' +
              appointment.patient.comments;

    }
    return ev;
  },

  remindersHtml(reminders,appointment){
    if(reminders.length == 0){ return ''; }
    var html = "<div class='reminder_cell' appointment_id='"+appointment.id+"'><span class='badge pull-right'>" + reminders.length + "</span><form action=''>";
    reminders.forEach(function(reminder){
      if(reminder != null) {
        html += "<div id='reminder_"+ reminder['id'] +"'><input type='checkbox' class='reminder_item' name='reminder_list' data-id='"+ reminder['id'] +"'> " + reminder['description'] + "<br></div>";
      }
    });
    html += "</form></div>";
    return html;
  },

  remindersArray(json){
    return JSON.parse(json);
  },

  fieldsForCalendarEvent(title){
    var col1 = '<span className="tm_calendar_event_title">' + title + '</span>';
    return [col1,'','','','','',''];
  },

  fieldsForAppointment(appointment, reminders_array, current_user){
    var service_code = appointment.service_code.code;
    if (appointment.missed)
      service_code = 'Missed';
    patient_provider = appointment.is_self_pay ? 'Cash Pay' : appointment.patient.payor;
    if(current_user.is_limited_clinician_x){
      var fields = [
        this.patientHtml(appointment),
        service_code,
                "<span data-patient-id='" + appointment.patient.id + "' class='patient_link' data-action='eap'>" +
                patient_provider + "</span>",
        accounting.formatMoney(appointment.patient.patient_balance)
      ];
    } else if(current_user.is_limited_clinician){
      var fields = [
        this.patientHtml(appointment),
        service_code,
                "<span data-patient-id='" + appointment.patient.id + "' class='patient_link' data-action='eap'>" +
                patient_provider + "</span>"
      ];
    } else {
      var fields = [
        this.patientHtml(appointment),
        service_code,
                "<span data-patient-id='" + appointment.patient.id + "' class='patient_link' data-action='eap'>" +
                patient_provider + "</span>",
        appointment.patient.cc ? 'Yes' : 'No',
        accounting.formatMoney(appointment.patient.patient_balance),
        accounting.formatMoney(appointment.patient.insurance_balance)
      ];
    }
    if(this.includeLocation()){
      fields.push(appointment.location && appointment.location.informal_name ? appointment.location.informal_name.substring(0,11)+'...' : '');
    }
    fields.push(this.remindersHtml(reminders_array,appointment));
    return fields;
  },

    patientHtml(appointment){
        var that = this;
        var calendarView = that.state.calendarView;
        if(calendarView == 'agendaStaff'){
            if(that.state.currentClinician.is_supervisor &&
                !that.state.currentClinician.is_director &&
                !that.state.currentClinician.is_sys_admin &&
                appointment.clinician_id != that.state.currentClinician.id &&
                (!appointment.supervision) &&
                appointment.clinician.supervisior_id != that.state.currentClinician.id) {
                return "<span data-appt-id='" + appointment.id + "' data-appt-code='" +
                    appointment.service_code.code + "' data-patient-id='" +
                    appointment.patient_id + "' class='patient_link noclick'>" +
                    "Private" + "</span>";
            }
            name = appointment.patient.firstname;
            if(name != "undefined" && (that.state.currentClinician.is_sys_admin ||
                that.state.currentClinician.is_supervisor ||
                that.state.currentClinician.is_director ||
                that.state.currentClinician.is_scheduler ||
                appointment.patient.clinician_id == that.state.currentClinician.id)) {
                name = name.charAt(0) + " " + appointment.patient.lastname;
            } else {
                name = "Private";
            }
            return "<span data-appt-id='" + appointment.id + "' data-appt-code='" +
                appointment.service_code.code + "' data-patient-id='" +
                appointment.patient_id + "' class='patient_link'>" +
                name + "</span>";
        } else {
            return "<span data-appt-id='" + appointment.id + "' data-appt-code='" +
                appointment.service_code.code + "' data-patient-id='" +
                appointment.patient.id + "' class='patient_link'>" +
                appointment.patient.firstname + " " +
                appointment.patient.lastname + "</span>";
        }
    },

  reloadEvent(){
    var appt = this.get('controller.controllers.manage_appointment.apptToRender');
    if (appt) {
      this.set('controller.controllers.manage_appointment.apptToRender', null);
      if (appt.get('frequency') == 'One Time') {
        var timeZone = this.get('controller.controllers.current_clinician.time_zone');
        var include_location = this.includeLocation();
        var event = this.buildEvent(appt, timeZone, include_location);
        this.$().fullCalendar('removeEvents', event.id);
        this.$().fullCalendar('renderEvent', event);
      } else {
        this.refetchEvents();
      }
    }
  },

  render: function() {
    var that = this;
    return (
        <div id="schedule">

        <div id="schedule_date">
          <h1>{that.state.currentDate.format("ddd MMM D, YYYY")}</h1>
        </div>

        <div id="schedule_nav" className="no_print">
          <div className="btn-group">
            <button className="btn" onClick={that.previous}><i className="icon-chevron-left"></i></button>
            <button className="btn displayingToday active" onClick={that.today} >{that.state.todayLabel}</button>
            <button className="btn" onClick={that.next}><i className="icon-chevron-right"></i></button>
          </div>

          <button className="btn first_btn date_picker" data-date=""><i className="icon-calendar"></i></button>

          <div className="btn-group">
            <button onClick={that.displayingDayView} className="btn calendarview first_btn">Day</button>
            <button onClick={that.displayingWeekView} className="btn calendarview displayingWeekView">Week</button>
            <button onClick={that.displayingMonthView} className="btn calendarview displayingMonthView">Month</button>
            <button onClick={that.displayingStaffView} className="btn calendarview displayingStaffView">Staff</button>
          </div>
        </div>

        <div id="print_calendar" className="no_print">
          <a href="javascript: void(0)" onClick={that.print} target="_blank"><span className="glyphicon glyphicon-print"></span> Print</a>
        </div>

        <div id="calendar">

        </div>

      </div>
    );
  }
});