Calendar with slide on days of the month

Asked

Viewed 43 times

0

inserir a descrição da imagem aqui

personal I am apprentice, I imagined a project and I really wanted to accomplish, I need to be able to give life to this calendar, although I can only call the idea of a calendar.

Where in the middle is the present day there is beginning, on the left the day before, and on the right the day after. with next and slide type arrows on the days of the month, where in the middle is the selected day that stands out like a zoom, year, day of the week and month in this style.

Maybe it’s easy to do, but I’m already 3 weeks looking for tutorials and nothing, I keep jumping from Javascripit to PHP and what I got so far was very little or almost nothing. 

body{
    color: #333;

}

.product-tabs {
    position: relative;
}

.nav-tabs {
    text-align: center;
    margin-top: 40px;
    border-bottom: 3px solid #ddd;
}

.nav-tabs > li {
    float: none;
    display: inline-block;
    margin-bottom: -3px;
}

.nav-tabs>li>a:hover {
    border-color: #eee #eee #ddd;
    border-color: transparent;
    background-color: transparent;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    border: 1px solid transparent;
    border-bottom-color: #d51335;
    border-bottom-width: 3px;
}

.tab-pane{
    padding: 10px;
}

.tab-control .previous-button, .tab-control .next-button{
    position: absolute;
    top: 25%;
}

.tab-control .previous-button{
    left: 10%;
}

 .tab-control .next-button{
     right: 10%;
 }
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Previous & Next button</title>

    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!-- Fonts -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-12 text-center">
                <h2>Calendário<br/><small>2017</small></h2>
            </div>
        </div>


        <div class="teste tab-content text-center">
            <div class="tab-pane" id="tab1">
                <h3>Quarta</h3>
            </div>
            <div class="tab-pane active" id="tab2">
                <h3>Quinta</h3>
            </div>
            <div class="tab-pane" id="tab3">
                <h3>Sexta</h3>
            </div>                    
        </div>


        <div class="row">
            <div class="col-sm-12 product-tabs">
                <ul class="nav nav-tabs">
                    <li class="tes"><a href="#tab1" data-toggle="tab">13</a></li>
                    <li class="tes active"><a href="#tab2" data-toggle="tab">14</a></li>
                    <li class="tes"><a href="#tab3" data-toggle="tab">15</a></li>                                       
                </ul>

                


                <div class="tab-control">
                    <a class="previous-button" role="button"><i class="fa fa-angle-left fa-3x fa-fw"></i></a>
                    <a class="next-button" role="button"><i class="fa fa-angle-right fa-3x fa-fw"></i></a>
                </div>
            </div>


        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-sm-12 text-center" id="">
                <h3>Dezembro</h3>
            </div>                    
        </div>
    </div>
        

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $('.next-button').click(function(){
            $('.nav-tabs > .active').next('li').find('a').trigger('click');
            //trigger the click on the tab same like we click on the tab
        });

        $('.previous-button').click(function(){
            $('.nav-tabs > .active').prev('li').find('a').trigger('click');
            //trigger the click on the tab same like we click on the tab
        })
    </script>
</body>

</html>

Kind of embarrassed by why I did more is the way, I put only 3 days of example in the code, because I have no idea how to associate the real calendar,but the idea is that the other days stay hidden, I think I can understand. if anyone can at least tell me which way to go.

calendar slide

  • Your question does not make much sense. You have to learn a language and in it assemble what you want to do. Schedule involving calendar involves some things. Your code showed nothing. Where do you tah pulling the calendar? I suggest that you assemble the layout first (it seems you already have something) and from there look for a programming language to get the dates.

  • What a shame, but it’s just like that in the beginning. Before hand I thank the attention. There are many tutorials on the internet that help a lot, because they can get good data both by PHP and by javascript, but the problem is the display in index, take from there also with you both by GET, POST, Elementebyid, but I repeat, show there specifying where it will be displayed is still confusing for me. As well as dismember the date parts, since the functions shown in the tutorials out there, show only the day we are and the calendars are modules ready. an input type date for example.

1 answer

0

I suggest you understand how other calendar plugins work and try to apply to your project as an example, I suggest datepickerbootstrap. However you have to know a lot of javascript, I suggest starting studying from basic to advanced before proceeding. (I had to publish a reply because I don’t have access to comments)

  • You’re right, what bothers me most is the anxiety of already programming, the problem is that I’m not asking the right question, I can get the system date in php and js, I’ve already managed to make a calendar by table also direct on the index, but I can’t figure out how to dismember the parts specifying where each part will be displayed for example, since the idea seems to ask for this because it’s kind of a slid in circles, there’s no way that I’m a donkey that doesn’t see that what I want to do is just CSS. rsrsr I’m suspicious of this. But thank you I’m looking at the documentation you recommended.

Browser other questions tagged calendar slide

You are not signed in. Login or sign up in order to post.