DEV Community

Cover image for Criar agenda de compromissos usando Rails 4 [outdated]
.
.

Posted on • Updated on

Criar agenda de compromissos usando Rails 4 [outdated]

#ruby #rails #rails4

Criar agenda de compromissos usando Rails 4 [outdated]

Uma forma muito legal de agregar uma agenda de compromissos ou eventos no seu projeto é utilizando um calendário. No Ruby on Rails é muito simples fazer isso com a ajuda da gem table_builder.

Crie um novo projeto e gere o modelo de compromisso:

$ rails new AgendaDeCompromissos 
$ rails g scaffold Compromisso titulo:string texto:text date:date 
$ rake db:migrate
Enter fullscreen mode Exit fullscreen mode

Adicione a gem table_builder no arquivo Gemfile para preparar a instalação:

gem “watu_table_builder”, :require => “table_builder”
Enter fullscreen mode Exit fullscreen mode

Depois, no terminal digite:

$ bundle install
Enter fullscreen mode Exit fullscreen mode

Em view/compromissos/index.html.erb crie a tela do calendário:

    <%= calendar_for(@compromissos) do |t| %>
      <%= t.head(‘DOM’,’SEG’, ‘TER’, ‘QUA’, ‘QUI’, ‘SEX’, ‘SAB’) %> 
      <%= t.day do |day, compromissos| %> 
        <%= day.day %> 
        <% compromissos.each do |compromisso| %> 
          <%= h(compromisso.titulo) %> 
        <% end %> 
      <% end %> 
    <% end %>

    <%= link_to ‘Novo Compromisso’, new_compromisso_path %>
Enter fullscreen mode Exit fullscreen mode

Crie um arquivo css para definir o estilo do calendário, assets/stylesheets/calendar.css:

    #calendar table { 
      border-collapse: collapse; 
      width: 100%; 
    }

    #calendar td, #calendar th { 
      font-family: “Lucida Grande”,arial,helvetica,sans-serif; 
      font-size: 10px; 
      padding: 6px; 
      border: 1px solid #999; 
    }

    #calendar th { 
      background: #DDD; 
      color: #666; 
      text-align: center; 
      width: 14.2857142857143%; 
    }

    #calendar td { 
      background: #FFF; 
      color: #777; 
      height: 80px; 
      vertical-align: top; 
      font-size: 16px; 
    }

    #calendar .notmonth { 
      color: #CCC; 
    }

    #calendar #month { 
      margin: 0; 
      padding-top: 10px; 
      padding-bottom: 10px; 
      text-align: center; 
    }

    #calendar #month a, #calendar #month a:hover { 
      text-decoration: none; 
      padding: 0 10px; 
      color: #999; 
    }

    #calendar .today { 
      background-color: #D7F2FF; 
    }

    #calendar ul { 
      margin: 0; 
      margin-top: 5px; 
      padding: 0; 
      list-style: none; 
    }

    #calendar li { 
      margin: 0; 
      padding: 0; 
      font-size: 11px; 
      text-align: center; 
    }
Enter fullscreen mode Exit fullscreen mode

Nessa altura já temos o calendário com estilo criado:

Calendário estilizado mas sem conteúdo

Agora setamos o compromisso em app/controllers/compromissos_controller.rb para receber a data presente:

    def index 
      @compromissos = Compromisso.all 
      @date = params[:month] ? Date.parse(params[:month]) : Date.today 
    end
Enter fullscreen mode Exit fullscreen mode

Para colocar o mês e o ano na tela e incluir os botões de editar e deletar, fazemos o seguinte em app/views/projects/index.html.erb:

    <%= calendar_for(@compromissos) do |t| %> 
      <%= t.head(‘DOM’,’SEG’, ‘TER’, ‘QUA’, ‘QUI’, ‘SEX’, ‘SAB’) %> 
      <%= t.day do |day, compromissos| %> 
        <%= day.day %> <% compromissos.each do |compromisso| %>
          <%= link_to h(compromisso.titulo), compromisso %>
          <%= link_to ‘Editar’, edit_compromisso_path(compromisso) %> | <%= link_to ‘Deletar’, compromisso, method: :delete, data: { confirm: ‘Tem certeza?’ } %> 
        <% end %> 
      <% end %> 
    <% end %>
Enter fullscreen mode Exit fullscreen mode

Adicione as setas para navegar pelos meses no calendário, app/views/projects/index.html.erb:

    <%= link_to 
      “<”, :month => (@date.beginning_of_month-1).strftime(“%Y-%m-%d”) %> <%=h @date.strftime(“%B %Y”) 
    %> 
    <%= link_to 
      “>”, :month => (@date.end_of_month+1).strftime(“%Y-%m-%d”) 
    %>

    <%= calendar_for @compromissos, :year => @date.year, :month => @date.month do |t| %> 
      <%= t.head(‘DOM’,’SEG’, ‘TER’, ‘QUA’, ‘QUI’, ‘SEX’, ‘SAB’) %> 
      <%= t.day do |day, compromissos| %> 
        <%= day.day %> 
        <% compromissos.each do |compromisso| %>
          <%= link_to h(compromisso.titulo), compromisso %>
          <%= link_to ‘Editar’, edit_compromisso_path(compromisso) %> | <%= link_to ‘Deletar’, compromisso, method: :delete, data: { confirm: ‘Tem certeza?’ } %> 
        <% end %> 
      <% end %> 
    <% end %>

    <%= link_to ‘Novo Compromisso’, new_compromisso_path %>
Enter fullscreen mode Exit fullscreen mode

Resultado final:

Tela para adicionar compromissos

Calendário estilizado e com o compromisso adicionado

Código fonte: Github
Demo: Heroku

Obrigada!

Top comments (0)

Read next

nicolassimpsonia profile image

Buy verified cash app account

Bruce Walker -

linusmwiti21 profile image

Level Up Your Skills: Build a Web Quiz App with Basic JS, HTML & CSS

lino -

bickyy54 profile image

A Beginner's Guide to Containerization

Bicky -

stevepurpose profile image

Routing in Computer Networking

Stephen Odogwu -