CODEWITHSUNDEEP
djangoflatpickr
Guido
Guido

Reputation: 1

Differences when running HTML script with "python manage.py" or Visual Studio Code's Live Server

I'm building a website and I've been experiencing some issues when debugging. I'm using Visual Studio Code and the framework Django. I'm really new to this so I could be making some silly mistake. The problem I have is this: I'm trying to insert a date-time picker to an HTML (particularly, a flatpickr date-time picker). I want it to be included in a particular div section, and I've followed the corresponding instructions to do this. Nevertheless, when I run the code using the "python manage.py runserver", the calendar appears in a top-left position instead of at the bottom, where the div is. This is how it looks running the "python manage.py runserver" command: (https://i.sstatic.net/t96x2.png). And this is how it looks when I use the "Open with Live Server" option in Visual Studio Code: (https://i.sstatic.net/HH1Pv.png) When using the "Open with Live Server" option, of course, the css isn't applied, so it just shows the HTML. But there the calendar appears where it should.

I send also the HTML code of the page.

I paste the code of the webpage here

{% load static %}
<html>
    <head>
        <title>Atención dental Dalla Vecchia</title>
        <link rel="stylesheet" href="{% static 'C:/Users/CgLenovo/Documents/Programas/Sitio_web_dental_3/Dental_website/static/home/css/style.css' %}">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Ubuntu+Condensed&display=swap" rel="stylesheet">
        <!-- Agrega la hoja de estilos de Flatpickr -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
        <!-- Agrega la biblioteca de Flatpickr -->
        <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    </head>
    <body>
        <!--
             <nav class="navbar">
            <ul>
                <li id="home"><a href="">Home</a></li>
                <li><a href="">Acerca de mí</a></li>
                <li><a href="">Turnos</a></li>
                <li><a href="">Contacto</a></li>
            </ul>
        </nav>

        -->

        <div id="div1">
          <h1 id="title">Od. Marina Dalla Vecchia</h1>
          <h2 id="subtitle">Ortodoncia y ortopedia maxilar</h2>
            <pre id="p1">
                Nos especializamos en el campo de la ortodoncia y ortopedia maxilar, brindando atención
                a niños y adultos.
                Además realizamos trabajos de odontología general
            </pre>
        </div>

        <div id="div_presentation">
            <h2 id="title_presentation">Od. Marina</h2>
            <h2 id="title_presentation_2">Dalla Vecchia</h2>
            <pre id="descr_presentation">
                M.N. 42102
                Odontóloga Universidad de Buenos Aires.
                Ayudante de la Cátedra de Cirugía y Traumatología Bucomaxilofaciar II,
                Fac. de Odontología, Universidad de Buenos Aires

            </pre>
            <img src="{% static 'home/img/foto_presentation.png' %}" id="img_presentation">
        </div>

        <div id="div3">
            <h2>Otras especialidades</h2>
        </div>

    <div id="div_esp">
        <div id="div_limp_dent">
            <img src="{% static 'home/img/s6.png' %}" id="img_limp_dent">
            <h3 id="h3_limp_dent">Limpieza dental con ultrasonido</h3>
        </div>

        <div id="div_blanq">
            <img src="{% static 'home/img/blanqueamiento.png' %}" id="img_blanq">
            <h3 id="h3_blanq">Blanqueamiento</h3>
        </div>

        <div id="div_restaur">
            <img src="{% static 'home/img/restauracion.png' %}" id="img_restaur">
            <h3 id="h3_restaur">Restauración dental</h3>
        </div>

        <div id="div_tto_cond">
            <img src="{% static 'home/img/tto_conducto.png' %}" id="img_tto_cond">
            <h3 id="h3_tto_cond">Tratamiento de conducto</h3>
        </div>

        <div id="div_extracc">
            <img src="{% static 'home/img/extracc.png' %}" id="img_extracc">
            <h3 id="h3_extracc">Extracciones</h3>
        </div>

        <div id="div_protesis">
            <img src="{% static 'home/img/protesis.png' %}" id="img_protesis">
            <h3 id="h3_protesis">Prótesis fija y removible</h3>
        </div>

        <div id="div_brux">
            <img src="{% static 'home/img/placa_brux.png' %}" id="img_brux">
            <h3 id="h3_brux">Placa para bruxismo</h3>
        </div>

        <div id="div_top_fluor">
            <img src="{% static 'home/img/s6.png' %}" id="img_top_fluor">
            <h3 id="h3_top_fluor">Topicación con flúor</h3>
        </div>

    </div>

  
    <div id="div_turnos">
        <h2 id="h2_turnos">Reserve su turno</h2>
    </div>

    
    <form id="form_turnos" action="index-html" method="post">
        {{form}}
    </form>

    <div id="div_calendario">
        <h2>Aquí va el calendario</h2>
      **<!-- The calendar should go here -->**
    </div>
    
    <script>
        var calendario = document.getElementById("div_calendario")
        flatpickr(calendario, {
          dateFormat: "Y-m-d",
          inline: true
        });
      </script>
    
    </body>
    
</html>

Upvotes: 0

Views: 25

Answers (0)

Related Questions