Git Product home page Git Product logo

Comments (9)

willsnake avatar willsnake commented on May 18, 2024 1

Hi!

I've solved it, the problema was that I forgot to specify the rel type on the <link> tag.
Sorry, rookie mistake.
But thanks for your time.

from angular-bootstrap-calendar.

mattlewis92 avatar mattlewis92 commented on May 18, 2024

Have you included the calendar CSS file?

from angular-bootstrap-calendar.

willsnake avatar willsnake commented on May 18, 2024

Hi!

Yes, I've added it.
Here I post my code.

<!DOCTYPE html>
<html lang="es">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Maestria</title>

    <!-- Bootstrap Core CSS -->
    <link href="http://localhost/Maestria/css/bootstrap.min.css" rel="stylesheet">

    <link href="http://localhost/Maestria/bower_components/angular-bootstrap-calendar/dist/css/angular-bootstrap-calendar.min.css" type="text/css">

    <link href="http://localhost/Maestria/css/main.css" type="text/css">

    <!-- MetisMenu CSS -->
<!--    <link href="--><?//= base_url("css/plugins/metisMenu/metisMenu.min.css") ?><!--" rel="stylesheet">-->

    <!-- Custom CSS -->
<!--    <link href="--><?//= base_url("css/sb-admin-2.css") ?><!--" rel="stylesheet">-->

    <!-- Custom Fonts -->
<!--    <link href="--><?//= base_url("font-awesome-4.2.0/css/font-awesome.min.css") ?><!--" rel="stylesheet" type="text/css">-->

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body ng-app="mwl.calendar">

<div id="wrapper">
<div id="page-wrapper">
    <div class="container-fluid">
        <div class="row" ng-controller="MainCtrl" id="demo">
            <div class="col-md-8 col-md-offset-2">
                <h2 class="text-center">{{ calendarControl.getTitle() }}</h2>

                <div class="row">

                    <div class="col-md-6 text-center">
                        <div class="btn-group">

                            <button class="btn btn-primary" ng-click="calendarControl.prev()">Previous</button>
                            <button class="btn btn-default" ng-click="setCalendarToToday()">Today</button>
                            <button class="btn btn-primary" ng-click="calendarControl.next()">Next</button>
                        </div>
                    </div>

                    <br class="visible-xs visible-sm">

                    <div class="col-md-6 text-center">
                        <div class="btn-group">
                            <label class="btn btn-primary" ng-model="calendarView" btn-radio="'year'">Year</label>
                            <label class="btn btn-primary" ng-model="calendarView" btn-radio="'month'">Month</label>
                            <label class="btn btn-primary" ng-model="calendarView" btn-radio="'week'">Week</label>
                            <label class="btn btn-primary" ng-model="calendarView" btn-radio="'day'">Day</label>
                        </div>
                    </div>

                </div>

                <br>

                <mwl-calendar
                    calendar-events="events"
                    calendar-view="calendarView"
                    calendar-current-day="calendarDay"
                    calendar-control="calendarControl"
                    calendar-event-click="eventClicked($event)"
                    calendar-edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
                    calendar-delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
                    calendar-edit-event-click="eventEdited($event)"
                    calendar-delete-event-click="eventDeleted($event)"
                    calendar-auto-open="true"
                    ></mwl-calendar>

                <br><br><br>

                <script type="text/ng-template" id="modalContent.html">
                    <div class="modal-header">
                        <h3 class="modal-title">Event action occurred!</h3>
                    </div>
                    <div class="modal-body">
                        <p>Action: <pre>{{ action }}</pre></p>
                        <p>Event: <pre>{{ event | json }}</pre></p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" ng-click="$modalInstance.close()">OK</button>
                    </div>
                </script>

                <h3 id="event-editor">
                    Edit events
                    <button class="btn btn-primary pull-right" ng-click="events.push({title: 'New event', type: 'important'})">Add new</button>
                    <div class="clearfix"></div>
                </h3>

                <table class="table table-bordered">

                    <thead>
                    <tr>
                        <th>Title</th>
                        <th>Type</th>
                        <th>Starts at</th>
                        <th>Ends at</th>
                        <th>Remove</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr ng-repeat="event in events">
                        <td><input type="text" class="form-control" ng-model="event.title"></td>
                        <td>
                            <select ng-model="event.type" class="form-control">
                                <option value="important">Important</option>
                                <option value="warning">Warning</option>
                                <option value="info">Info</option>
                                <option value="inverse">Inverse</option>
                                <option value="success">Success</option>
                                <option value="special">Special</option>
                            </select>
                        </td>
                        <td>
                            <p class="input-group" style="max-width: 250px">
                                <input type="text" class="form-control" readonly datepicker-popup="medium" ng-model="event.starts_at" is-open="event.startOpen" close-text="Close" />
                    <span class="input-group-btn">
                      <button type="button" class="btn btn-default" ng-click="toggle($event, 'startOpen', event)"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
                            </p>
                            <timepicker ng-model="event.starts_at" hour-step="1" minute-step="15" show-meridian="true"></timepicker>
                        </td>
                        <td>
                            <p class="input-group" style="max-width: 250px">
                                <input type="text" class="form-control" readonly datepicker-popup="medium" ng-model="event.ends_at" is-open="event.endOpen" close-text="Close" />
                    <span class="input-group-btn">
                      <button type="button" class="btn btn-default" ng-click="toggle($event, 'endOpen', event)"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
                            </p>
                            <timepicker ng-model="event.ends_at" hour-step="1" minute-step="15" show-meridian="true"></timepicker>
                        </td>
                        <td><button class="btn btn-danger" ng-click="events.splice($index, 1)">Delete</button></td>
                    </tr>
                    </tbody>

                </table>
            </div>
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
</div>
<!-- /#page-wrapper --></div>
<!-- /#wrapper -->

<script src="http://localhost/Maestria/bower_components/moment/min/moment.min.js"></script>

<script src="http://localhost/Maestria/bower_components/angular/angular.min.js"></script>

<script src="http://localhost/Maestria/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

<script src="http://localhost/Maestria/bower_components/angular-bootstrap-calendar/dist/js/angular-bootstrap-calendar-tpls.min.js"></script>

<script src="http://localhost/Maestria/js/main.js"></script>

</body>

</html>

from angular-bootstrap-calendar.

mattlewis92 avatar mattlewis92 commented on May 18, 2024

Are there any errors in the console? What shows up if you inspect element on where the calendar should be?

from angular-bootstrap-calendar.

willsnake avatar willsnake commented on May 18, 2024

Yes, I've got an error, but from jquery.

screenshot 15

from angular-bootstrap-calendar.

mattlewis92 avatar mattlewis92 commented on May 18, 2024

Can you try to reproduce it on http://plnkr.co/

Without actually being able to hack about with the code myself, I’m pretty much just guessing otherwise.

On 24 January 2015 at 18:21:42, Daniel Rodríguez Monroy ([email protected]) wrote:

Yes, I've got an error, but from jquery.

—
Reply to this email directly or view it on GitHub.

from angular-bootstrap-calendar.

willsnake avatar willsnake commented on May 18, 2024

Hi!

I'm creating a repository, as soon as it's up, I will share you the link.
Also, I want to thank you for all your help.
And sorry for my english.

from angular-bootstrap-calendar.

willsnake avatar willsnake commented on May 18, 2024

Hi!

Here it's the link to the proyect link the proyect.
Thanks in advancem for all your help.

from angular-bootstrap-calendar.

mattlewis92 avatar mattlewis92 commented on May 18, 2024

Glad to hear :)

from angular-bootstrap-calendar.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.