Este componente exibe uma linha de datas com deslize horizontal, mostrando as próximass sete datas a partir de hoje. A interface é dividida em duas partes: o nome do dia da semana acima e o número do dia abaixo. O dia atual é destacado com o rótulo "Hoje", e os usuários podem clicar em qualquer data ou deslizar para navegar pelas opções.

Código da Interface

<view wx:for="{{dayList}}" wx:for-index="idx" class="tab-item {{currentSwiper === idx ? 'active' : 'noactive'}}" wx:key="idx" bindtap="changeTab" data-current="{{idx}}">
 <view class="TimeOrderBox scroll-view-item bc_red {{id === idx ? 'coloBack' : ''}}" id="{{idx}}" data-selectTime="{{item.month}}/{{item.day}}" data-week="{{item.week}}">
   <view class="TimesWD">
     <text class="TimeOrderText" wx:if="{{NowDay === item.day}}">Hoje</text>
     <text class="TimeOrderText" wx:else>Segunda</text>
     <view class="TimeOrderDay">
       <text class="TimeOrderTextDay">{{item.day}}</text>
     </view>
   </view>
 </view>
</view>

Função de Geração de Datas (JavaScript)

generateWeekDates() {
 const today = new Date();
 const year = today.getFullYear();
 const month = today.getMonth() + 1;
 const day = today.getDate();

 const weekDays = ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'];
 const dates = [];

 // Adiciona o dia atual
 dates.push({
   day,
   month,
   week: weekDays[today.getDay()],
   year
 });

 // Gera os próximos 6 dias
 for (let i = 1; i <= 6; i++) {
   const nextDate = new Date(today);
   nextDate.setDate(day + i);
   dates.push({
     day: nextDate.getDate(),
     month: nextDate.getMonth() + 1,
     week: weekDays[nextDate.getDay()],
     year: nextDate.getFullYear()
   });
 }

 return dates;
}

Tradução de Dia da Semana

getWeekdayLabel(dayIndex) {
 const labels = ['D', 'S', 'T', 'Q', 'Q', 'S', 'D'];
 return labels[dayIndex] || 'N/A';
}

Estilização CSS

.tab-item {
 float: left;
 margin-left: 20rpx;
 position: relative;
 top: 8rpx;
}

.pageTop {
 height: 140rpx;
 background-color: #2E323B;
 padding-left: 40rpx;
 position: fixed;
 top: 0;
 z-index: 99999;
 width: 100%;
}

.TimeOrderBox {
 width: 100%;
 height: 137rpx;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 text-align: center;
}

.active .TimeOrderDay {
 width: 56rpx;
 height: 56rpx;
 background-color: #00AFD2;
 border-radius: 50%;
 color: white;
 font-size: 32rpx;
 line-height: 56rpx;
}

.active .TimeOrderText {
 color: white;
 font-size: 20rpx;
 font-weight: bold;
}

.noactive .TimeOrderTextDay {
 opacity: 0.5;
}

swiper {
 height: 100%;
 width: 100%;
 position: absolute;
}

swiper-item {
 overflow: scroll;
}

.contentBody {
 padding: 20rpx;
 text-align: center;
 font-size: 28rpx;
 color: #333;
}

.heightView {
 height: 100rpx;
}

Integração com Swiper e Eventos

onLoad() {
 this.setData({
   dayList: this.generateWeekDates(),
   currentSwiper: 0,
   NowDay: new Date().getDate()
 });
},

switchSwiper(e) {
 this.setData({ currentSwiper: e.detail.current });
},

changeTab(e) {
 const index = e.currentTarget.dataset.current;
 this.setData({ currentTab: index });
}

Exibição de Dados no Swiper

<swiper 
 circular="true"
 bindchange="switchSwiper"
 current="{{currentSwiper}}"
 indicator-dots="{{true}}"
 autoplay="{{false}}"
 interval="3000"
 duration="500">
 <block wx:for="{{dataShow}}" wx:key="index">
   <swiper-item>
     <view wx:if="{{dataShow[index].length > 0}}">
       <scroll-view scroll-y="{{true}}" style="height: 100vh;">
         <view class="contentBody" wx:for="{{dataShow[index]}}" wx:key="index">
           <text>{{item.duration}} min - Treino {{index + 1}}</text>
         </view>
       </scroll-view>
     </view>
     <view wx:else>
       <view class="contentBody"><text>Sem treinos disponíveis</text></view>
     </view>
   </swiper-item>
 </block>
</swiper>

O componente utiliza um objeto JSON simulado para representar horários de treinos por data. Os dados são processados e organizados em uma lista de sete itens correspondentes aos dias da semana. Ao deslizar entre os itens, o calendário atualiza dinamicamente o foco visual na data ativa.